元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事やブログのカスタマイズについてアウトプットしています。

 メニュー

【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に関しては、表示されない場合があるので確認が必要です。SVGJavaScriptを使いたい場合は、HTML内にSVGタグで直書きする方法が良いです。

参考サイト