SVGファイルを表示させる時の注意点

こんにちは。Webデザイナーのふくだです。
SVGファイルを使用した際に表示されないケースがあったので注意点を書いてみました。

■サーバーの設定をしないと表示されない

下記のように画像としてHTMLやCSSで読み込んで使用する場合はサーバーの設定をする必要があります。

<img src="icon.svg" width="48" height="48">

.icon {
  background-image: url("icon.svg");
}

サーバーの設定は".htaccess"に下記のコードを書く。

AddType image/svg+xml .svg .svgz
AddEncoding gzip .svgz

ただし、JavaScript等で操作はできません。

■パスで直書きすればサーバーの設定は不要

以下のようにHTMLにSVGのパスを直書きすればサーバーの設定は不要です。
こちらはJavaScript等で操作可能です。

<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48">
    <path fill="#98B93B" fill-rule="evenodd" d="M12.5 0a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5z" />
</svg>

■まとめ

こちらでサーバーの設定をいじれない案件などは直書きをするしかありませんが、IcoMoonなどのサービスでSVGをWebフォント化して利用するのもおすすめです。