会社のウェブサイトをリニューアルする際は、Internet Explorer 8以下（≒Windows XPユーザー）はあまり対応しない方向で、リニューアルを行っています（最低限の表示は可能にする程度）。（Internet Explorer 8での閲覧者も10％以下ですし）
会社では様々なサイトがあり、ウェブ制作に携わっている人数が私を含め、1、２名しかいないので、次のリニューアル・サイトの見直しが数年後になることもあるので、長く使えるもの、また、できればモバイル対応（スマートフォン対応）も可能にしていきたく思っています。
Internet Explorer 9（以下IE9）ユーザーであれば、SVGの画像フォーマットが使用できます。
SVG画像利用のメリット
SVG画像のメリットはざっくり言うと以下のものが挙げられます。
SVGの画像は、いわゆるベクトルデータなので、拡大してもキレイ（滑らか）な曲線で描かれます。繊細な表現の画像には嬉しいですね。
また、拡大してもキレイということは、実質的にピクセル数が多い高解像度ディスプレイのデバイス（Windows・Mac・スマートフォン・タブレットなど）でも、ドットの粗さが目立たずに表示されるので、解像度に応じた複数の画像を用意しなくても良いので便利です。１つのファイルで完結すれば、ファイルの管理も簡単ですから。
使ったことがない人が分かりやすいSVGの使い方
そんなSVGですが、使い方が難しいのかというと、そうではありません。
画像ファイル扱いなのでimgタグに使えます。
つまり、
<img src="logo.png">
と書いていたところを、
<img src="logo.svg">
とsrcの部分のファイル指定を変更するだけです。簡単ですね。（.svgもしくは.svgzのファイルを指定します）
ですが、こう指定しただけでは表示されない場合もあるのです。（ようやく本題）
SVG画像を使う時はコンテンツタイプを指定しよう
.svg・.svgzのファイルが、SVGの画像だよ！ということを定義しておかないと、ブラウザーが何のファイルかわからないので、定義を書いておきましょう。（Content-Typeを定義します）
Apacheであれば、httpd.confなどに書いておくべきでしょうが、手抜きして.htaccessに書くこともできます。
.htaccessのファイル内に以下のものを書くことで、.svg・.svgzファイルがSVG画像ファイルだと定義されます。
AddType image/svg+xml .svg .svgz
と、ここまではよくブログで書いてあります。
この設定だけでも、先程のソースのようにimgタグのsrc属性に「.svg」ファイルを指定すると、きちんとSVG画像が表示されます。
.svgはファイルサイズが大きい→.svgz使おう
.svgのSVG画像ファイルは、XMLのテキストファイルなので、単純なロゴマークでも結構ファイルサイズが大きくなってしまうことがあります。
ファイルサイズはページの表示速度に直結する問題で、閲覧者の快適さに繋がります。ファイルサイズはできれば小さい方が良い。
ということで.svgz（SVG圧縮）のファイルを作成してみると、ファイルサイズが1/3程度になるものもありました。
これはナイス！！
たとえばデジタルカタログ掲載サイトの「Print-Link.net」（http://print-link.net/）で使用している以下のロゴですが（実際は白）、次のようにサイズが異なります。67％ファイルサイズをカットできています。
- SVG形式で保存：5.74KB
- SVGZ形式で保存：1.91KB
トップページのバナーも次のように違います。こちらも66％ファイルサイズをカットできていますね。
- SVG形式で保存：30.8KB
- SVGZ形式で保存：10.6KB
これなら.svgz（SVG圧縮）ファイルを使わない手はありませんね。
.svgzを配置→表示されません→エンコーディングに問題
ということで配置してみると…
「あれ？読み込めない…？」
調べてみると、.svgzファイルのエンコーディングに問題があるようです。
SVGをgzip圧縮されているのがSVGZファイルですが、きちんとそれを明記する必要があるようです。
.htaccessファイルに以下の記述も追加します。（Content-Encodingを定義します）
AddEncoding gzip .svgz
floatしている要素内にsvgを配置→表示されません→widthに注意
SVG・SVGZファイルの書き出し方によりますが、SVGファイルには規定のwidth（横幅）がない場合もあります。
そうしたファイルはFirebugでSVGZのファイル名の部分にマウスカーソルをホバーして、画像の縦横サイズを見てみると「0×0」になっています。
この状態で、「float: left;」が適用されていて、その要素のwidthが指定されていない要素にSVG・SVGZファイルを配置すると、SVG・SVGZファイルには横幅が設定されていないので、横幅・縦幅が確定されず、見えない状態になってしまいます。
普通のPNG画像やJPEG画像であれば画像自体に横幅のサイズがあるからこういった問題は起きづらいのですが、スケーラブルな画像フォーマットならではの問題点ですね。
floatしている要素にはwidthをきちんとつけましょう。
まとめ
SVG画像が表示されない場合は、.htaccessファイルに以下の記述を加えてみて下さい。
AddType image/svg+xml .svg .svgz AddEncoding gzip .svgz
また、配置している要素のwidthが指定されているか確認してください。
.htaccessのファイルの記述は、なぜか上の１行目しか紹介していないブログが多いようです。それってやはり「.svgz」ファイルはあまり使われていないということなのかしら。Illustratorからだったら保存する手順はほとんど同じだし、ファイルサイズも小さくなるので良いと思うのですが。
以上を気をつければ簡単にSVG・SVGZファイルを配置することができます。
試してみてくださいね。
それでは、よいSVGライフを。
参考ページ
- ブラウザに圧縮SVG (.svgz) を表示する（Inkscape@JP）
補足：AddTypeの書き方について
「AddType image/svg+xml .svg .svgz」と拡張子前の「.」がない「AddType image/svg+xml svg svgz」の意味は同じだそうですよ。
「AddEncording」の拡張子部分も同じく「.」のありなしは関係ありません。
引数 extension は大文字小文字を区別せず、 最初のドットはあってもなくても構いません。
mod_mime - Apache HTTP サーバ バージョン 2.2