今回ブログのリニューアルでtwittreやFacebookのアイコンなどはSVGを使用しました。 初めて外部のSVGファイルを使用したのでその際に学んだこと、困ったこととかをメモ。

SVGとは

SVGはベクター形式の画像です。jpgやpngなどラスター形式の画像と違い、パスで書かれているので拡大しても画像が荒くなったりしません。 なのでRetinaディスプレイなどにも対応できます。

ただファイル容量はラスター形式の画像に比べ大きいです。 そしてIE8以下では使用できないので注意が必要です。

ちゃんと使いどころを考えて使用すればとても便利そう。

外部SVGファイルを使用する

SVGファイルは画像なので普通にimgタグを使って表示することが出来ます。 ~~~ html

~~~ width、heightを指定してあげれば自ずとそのサイズでキレイに表示してくれます。

ただしこのままではIE8以下は画像が表示されなくなってしまいます。 svgに対応していないブラウザではラスター形式の画像を準備して、代わりに表示させるという方法で対応が可能なようです。 その際はobjectタグを使用して以下のように書きます。 ~~~ html

~~~

サーバーによっては表示されない?

ローカルで構築して表示を確認して、サーバーにアップしたところうまく表示されないということがありました。 どうやらサーバーによっては.svgという拡張子を認識してくれるように設定しなければ行けないようです。

.htaccessでMIMEタイプの設定を行う

MIMEタイプとはサーバーが拡張子からファイルの種類を判断する機能のことで、ここにSVGも判断できるようにしてあげれば良いようです。

その方法は.htaccessに対して以下のコードを追加で解決できます。 ~~~ html

AddType image/svg+xml .svg AddType image/svg+xml .svgz ~~~

一部のディレクトリ内であればそのディレクトリに、全体であればルートフォルダに対して設定してあげればOKです。

まとめ

ちょっと今回はIE8以下は切り捨ててブログデザインを構築してしまったので、時間を見つけてIE8対応もやっていけたらと考えてます。 高解像度ディスプレイへの対応も増えていくだろうし今後使用する機会が増えていきそうなので、しっかり使い方覚えたいです。