SVGをHTMLやCSSで使用する方法【SVG】

hoge

いつも忘れるので、メモメモ。

 

htmlに直接SVGタグを記述

文字通り、HTMLに直接書く。

<html><body>
<svg>
～ 略 ～
</svg>
</body></html>

※この書き方（HTMLにSVGを直接書く）なら、CSSでfillなどの色指定の設定が可能。

 

 

htmlでimgタグのsrcでファイルを読込む

SVGは「test.svg」というファイルに入れておいて、imgとして読み込む。

<img src="test.svg" id="aaa" />

 

 

CSSで背景画像としてbackground-imageでファイルを読込む

SVGは「test.svg」というファイルに入れておいて、背景画像としてCSSで読み込む。

div{
background-image:url('test.svg');
content:" ";
width:10px;
height:10px;
}

 

 

CSSでcontentとしてファイルを読込む

SVGは「test.svg」というファイルに入れておいて、contentとしてCSSで読み込む。

div{
content:url('test.svg');
width:10px;
height:10px;
}

 

 

htmlでオブジェクトとして、data属性でファイルを読込む

SVGは「test.svg」というファイルに入れておいて、HTMLでオブジェクトとして扱う。

<object id="aaa" type="image/svg+xml" data="test.svg"></object>

 

 

htmlでオブジェクトとして、embedでファイルを埋めこむ

SVGは「test.svg」というファイルに入れておいて、HTMLでオブジェクトとして埋めこむ。
embedを使うのは、主に動画や音声ファイルだけど、画像ファイルでもOK。

<embed id="aaa" src='test.svg' />

 

 

PHPで、includeして使用する

SVGをまとめたファイルを「tests.svg」というファイルにしておいて、PHPでincludeしてから小出しに使う。
参考サイト：Icon System with SVG Sprites

 

●SVGファイル「tests.svg」
<svg>
<defs>

<g id="icon-1">
～ SVGコード ～
<g>

<g id="icon-2">
～ SVGコード ～
<g>

</defs>
</svg>

 

●HTML

PHPのincludeは、body開放タグの直後に置くこと。

<html>
～ 略 ～
<body>
<?php include_once("tests.svg"); ?>
～ 略 ～
<svg viewBox="0 0 100 100" class="icon icon-1">
<use xlink:href="#icon-1"></use>
</svg>
～ 略 ～
</body>

svgのuseでID指定をし、必要なsvgを呼び出す。

 

●CSS
.icon {
width:50px;
height:50px;
fill:red;
}

※fillは色指定の設定。

 

※SVGファイル内は、「g（グループ）」ではなく、「symbol」タグを使用する方法もあるらしい。（動作未確認）
参考サイト：アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう