SVG チュートリアル
SVGを使い始める

備考

<svg xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="25" fill="blue"/>
</svg>

バージョン

インラインSVG

インラインSVGでは、HTMLで記述されたSVGマークアップを使用して、ブラウザでグラフィックスを生成できます。

SVGインラインを使用する場合、DOCTYPEは厳密には必要ありません。代わりに、 <svg> openingタグとclosingタグをviewBoxまたはwidth属性とheight属性のいずれかと一緒に使うだけで十分です。

<svg width="100%" height="100%">
    <!-- SVG elements go here -->
</svg>

上記の<svg>フラグメントは、コンテナと構造要素の両方として機能します。この断片はそれ自身の座標系を確立する。

以下は、あるコンテンツでSVGフラグメントをレンダリングする例です。それは "Hello World！"で長方形を生成します。その中のテキスト

<svg width="50%" viewBox="0 0 10 10">
    <rect x="1" y="1" width="5" height="3" fill="teal" />
    <text x="2" y="2" font-family="Palatino, Georgia, serif" font-size="3%" font-weight="bold" fill="white">Hello World!</text>
</svg>

結果：

SVGを

<img>タグを使用して、SVGファイルの内容をHTMLドキュメント内のイメージとしてレンダリングできます。例えば：

<img src="my_svg_file.svg" alt="Image description">

デフォルトでは、 src属性で参照されるSVGファイルで指定されたwidthおよびheightプロパティに従ってイメージのサイズが表示されます。

このアプローチにはさまざまな制限があります。

• ブラウザのサポートには、Internet Explorer 8以前のバージョンやAndroid 2.3以前のバージョンは含まれていません。
• SVGファイルの外部にあるCSSを使用して、SVGファイルに含まれる個々の要素のスタイルを設定することはできません。すべてのCSSはイメージファイルそのものの中になければなりません。
• JavaScriptは実行されません。
• イメージは1つのファイルで完全でなければなりません。たとえば、SVGファイルにラスターイメージが含まれている場合、それらの内部イメージをデータURLとしてエンコードする必要があります。

背景画像としてのSVG

SVGファイルをCSSの背景画像として指定すると、HTML文書内にSVGファイルを表示できます。例えば：

.element {
    background-size: 100px 100px;
    background: url(my_svg_file.svg);
    height: 100px;
    width: 100px;
}

SVGファイルで指定された寸法がHTML要素の寸法より大きい場合、SVGをその要素内に収まるように拡大background-sizeするには、 background-sizeプロパティを指定することが望ましい場合があります。

<img>としてSVGを使用する場合と同じように、このアプローチではいくつかの制限があることに気付く価値があります。

• ブラウザのサポートには、Internet Explorer 8以前のバージョン、およびAndroid 2.3以前のバージョンは含まれていません。
• SVGファイルの外部にあるCSSを使用して、SVGファイルに含まれる個々の要素のスタイルを設定することはできません。すべてのCSSはイメージファイルそのものの中になければなりません。