【SVG】SVGの表示・読み込み

ブラウザにSVGを表示・読み込む方法について書きます。何パターンかあるので、その時に合う方法を選べると良いです。

SVGタグ

HTML内にSVGタグを挿入する方法です。

<svg version="1.1" width="300px" height="300px" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<g>
<circle cx="150" cy="75" r="10"/>
<circle cx="225" cy="150" r="10" fill="#cccccc"/>
<circle cx="150" cy="225" r="10" fill="#999999"/>
<circle cx="75" cy="150" r="10" fill="#dddddd"/>
<animateTransform attributeName="transform" type="rotate" from="0,150,150" to="360,150,150" dur="3s" repeatCount="indefinite" />
</g>
</svg>

IMGタグ

IMGタグでSVGファイルを指定する方法です。

<img src="./sample.svg">

CSSのbackground-imageプロパティ

CSSのbackground-imageプロパティで、SVGファイルを指定する方法です。

<div id="sample"></div>

#sample{
  width:300px;
  height:300px;
  background-image:url(./sample.svg);
}

objectタグ

HTML内にobjectタグでSVGファイルを指定する方法です。

<object type="image/svg+xml" data="./sample.svg"></object>

まとめ

• SVGタグを挿入する
• IMGタグで読み込む
• CSSのbackground-imageプロパティで読み込む
• objectタグで読み込む

以上の方法で、SVGファイルをブラウザに読み込むことができます。JavaScriptを使ったSVGに関しては、表示されない場合があるので確認が必要です。SVGでJavaScriptを使いたい場合は、HTML内にSVGタグで直書きする方法が良いです。

参考サイト

• HTML5でのSVGファイル操作のおさらい - Qiita