SVGを埋め込む方法は？
SVGは、文字通りスケーラブルなベクターグラフィックスであるベクターグラフィックス形式です 。 MVG？ SVG！ ベクター形式では、画像自体は保存されませんが、ポイントと曲線による構築の指示が保存されます。
ラスタ形式では、特定の数の画像ポイントに関する情報がバイナリブリックに密に詰め込まれます。 これを調べて変更することは、グラフィックエディターでのみ可能です。
PNG IH aV PLTE 0 IDAcZ d W= S 3 o; ]P IEND B` ~
SVG形式は、Illustrator、Sketch、Inkscapeなどのグラフィックエディターでも作成および変更できます。 ただし、テキスト形式でもあるため、任意のコードエディターでHTMLまたはCSSとして開くことができます。
<svg width="20"> <rect fill="#fc0" width="20" height="20"/> <line stroke="black" x1="0" y1="0" x2="20" y2="20"/> </svg>
さらに説明します。SVGは別のHTMLページのようなものです。 SVGを挿入するとき、実際には画像を挿入するだけでなく、ページ全体を挿入します。 座標系、ビューポート、スタイル、スクリプト、素晴らしい機能を備えています。
スタイルとスクリプト、カール！ ここに簡単な絵があります。
SVGを別のページとして見ると、必要な挿入方法が明確になります。 4つの主要な機能があります。
最初で最も簡単なのは、HTMLコード内の<img>
要素です。 原則として、これは任意の画像をアップロードするための最も効果的な方法です。ブラウザは、HTMLコードから前もってそれを知っており、それらの読み込みを開始します。
欠点は、そのようなSVGではスクリプトが機能せず、内部の要素と対話しようとする試みはすべて運命づけられることです。 ファイルはガラスの後ろのようになります。見ることはできますが、触ることはできません。 CSSアニメーションを含め、他のすべては正常に機能しますが。
<img src="picture.svg" alt=" ">
この方法は、相互作用を必要としないコンテンツ画像（ロゴ、グラフィック、図）に最適です。
2番目の方法は、CSS背景画像です。 要素、擬似要素、またはコンテンツに挿入するかどうかは関係ありません。結果は<img>
場合と同じです。ガラスの後ろですが、内部で何かが機能します。
.picture { background-image: url(picture.svg); }
このメソッドは、相互作用を必要としない装飾グラフィックスに適しています：背景、アイコン、その他の些細なこと。
3番目の方法は、 <object>
を介して、ページとSVGファイルの内部との間のガラスを破壊します。 スクリプト、インタラクション、アニメーションは、SVG内で記述されている場合に機能します。 <object>
タグの間にフォールバックを挿入できます。これは、ブラウザーがSVGを話さない場合に表示されます。
<object type="image/svg+xml" data="picture.svg"> <img src="picture.png" alt=""> </object>
実際、 <object>
代わりに、別のページを接続したかのように<iframe>
使用することもできます。 ただし、 <object>
はより適切に機能し、画像のサイズに合わせて調整されます。
柔軟性にお金を払う必要があります。これはもはや単なるグラフィックではなく、そこでスクリプトを作成できるという事実のために、この方法には他のセキュリティ要件が課されます。 たとえば、別のドメインの写真をそのように挿入することはできません。
この方法は、おもちゃ、グラフィックス、 あらゆる種類の複雑なグラフィックスなどのインタラクティブなグラフィックスを挿入する必要がある場合に適しています。 Flashクリップが<object>
介して挿入されたことを思い出すだけで十分です。 両親に聞いてみましょう。
4番目の方法は、ブラウザーが新しい標準に従ってHTMLパーサーを書き換えたときに機能し、SVGファイルのコンテンツを他のタグと同様にページに直接挿入できるようになりました。
<h1></h1> <svg width="20" height="20"> <rect fill="#fc0" width="20" height="20"/> </svg>
このSVGを使用すると、通常のHTML要素と同じように、スタイル、スクリプトを実行できます。 たとえば、ホバーで塗りつぶしの色を変更し、 すべてを一般的なスタイルで説明できます 。
<style> rect:hover { fill: #090; } </style> <svg> <rect fill="#fc0"/> </svg>
欠点は、そのような画像がページとは別にキャッシュされないことです-これはシンボルとユーザー名によって回避できますが、これは長い話です。これについては別に説明します。
SVGは単なるグラフィック形式ではありません-あなたと私はすでにこれを理解しています。 より深く掘り下げたいですか？ Sarah Suydanの記事を読んでください。これがこれまでのところ最高です。 すべてのリンクはビデオの説明にあります。
最後に：たくさんの方法とすべてが何かに適しています。 タスクに合ったものを選択しますが、常に最も簡単なものから開始します： <img>
と背景、そしてそれを既に複雑にします-十分でない場合。