ロゴやアイコン用などに・・・SVGの設置方法を紹介します！

公開日：2016/09/01

今回はSVGのソースそのまま置く以外にも別の設置法があったので、そちらを紹介します。

お馴染みのimgタグと、Flash等に使われるobjectタグ。
その他CSSのbackgroundを使って設置できるようなので、自分も勉強がてら覚えていきたいと思います。
こちらも覚えればSVGがもう少しとっつきやすくなるはず、です。

imgタグで設置

svg_set_01

<img src="img/sample_1.svg" width="400" alt="">

1	<img src="img/sample_1.svg" width="400" alt="">

サンプル1

imgタグの設置は他の画像形式と同じ要領で設置するだけでOK。
サイズも同じくタグ内のwidth、height、もしくはCSSで指定するだけ。
一番手軽な方法ですが、svgの対応していないブラウザでは表示されないので注意して下さい。

objectタグで設置

svg_set_02

<object type="image/svg+xml" data="img/sample_2.svg" width="400"></object>

1	<object type="image/svg+xml" data="img/sample_2.svg" width="400"></object>

サンプル2

こちらはdata内にソースを入れると表示されます。
objectタグ内に代替の画像を入れることで、svgに対応していないブラウザの時は代替画像を表示するよう対応することが出来ます。

※ソース例

<object type="image/svg+xml" data="img/sample_2.svg" width="400">
	<img src="img/sample_2.png" width="400" alt="">
</object>

</object>

CSSのbackgroundを使用する

svg_set_03

#sample_nav li {
	background: url(../img/sample_3.svg) ;
	background-repeat: no-repeat;
	background-position: left center;
	/* 背景画像画像サイズ */
	-webkit-background-size: 16px auto;
	background-size: 16px auto;
	
	padding: 5px 0 5px 20px;
}