株式会社コニファ　ツール紹介やプログラム集：外部SVGファイルを表示するhtmlタグなどのまとめ

ツール集：外部SVGファイルを表示するhtmlタグなどのまとめ

jpgやpng、gifといったラスター（bitmap）画像を拡大したり、保存し直したりすると画質がどんどん劣化します。それに対して、テキストベースのベクター画像であるSVGは、拡大縮小、再保存しても劣化することはありません。

これはhtml上であっても同様です。色数が多く、複雑な画像はともかく、アイコンや記号、ダイアグラムなどの単純な画像であれば、ひとつ用意しておくだけでいろいろなサイズに流用できて便利です。そこで外部のSVGファイルをhtmlで直接表示できるタグを備忘録としてまとめてみました。

外部SVGはIllustratorで作成したものをそのままを使っています。SVG上の表示サイズ縦横94pxです。また、各サンプルのタグの後ろに改行やマージンなどは付加していませんので、大きめの空間が空いてしまっている場合は、そのタグの振る舞いです。

（１）objectタグで外部のSVGを表示

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

（２）inputタグで外部のSVGを表示

<input type="image" src="012b.svg"/>

（３）iframeタグで外部のSVGを表示

<iframe src="012b.svg" style="border:0;"></iframe>

（４）embedタグで外部のSVGを表示

<embed src="012b.svg"/>

（５）要素のbackgroundに指定してSVGを表示

<div class="svg-bg">　<div>

.svg-bg		{
	width:92px;
	height:92px;
	background:url(012b.svg) no-repeat;
	display:inline-block;
	background-size:100% 100%;
	}

（６）imgタグで外部のSVGを表示

<img src="012b.svg"/>

（７）imgタグで外部のSVGを拡大縮小表示

<img src="012g.svg" height="60" width="60"/>   /*最初の画像*/

（８）imgタグで外部のSVGを使い、アイコン付きのボタン風表示

アイコンボタン

<div class="icon"><img src="012.svg" height="30" width="30"/>
	<span>アイコンボタン</span>
</div>

.icon	{
	width:200px;
	border:1px solid #bbb;
	background:url(img/btbg.png) repeat-x;
	padding:7px 12px;
	text-align:left;
	display: table-cell; 
  	vertical-align: middle;
  	line-height: 0; 
	border-radius: 0.5em;
	}
.icon span	{
	display:inline-block;
	font-size:16px;
	vertical-align: top;
	margin-left:15px;
	margin-top:15px;
	}