【.htaccess】SVGまたはSVGZ画像が表示されない時に確認すべき設定。

Ads by Google

icon-320

その便利さゆえに、近ごろ爆発的に普及しつつある「SVG画像」または「SVGZ画像」ですが、サーバー環境によってはブラウザーでうまく表示されないケースがあります。
今日紹介するのは、この「SVG画像」または「SVGZ画像」が表示されない時の解決策です。

ちなみにSVGとは「Scalable Vector Graphics」の略で、XML言語をベースに書かれた画像フォーマットのことです。
これまで使われてきた「JPEG」「GIF」「PNG」のような、所謂「ビットマップ」タイプの画像と異なり、画像データを座標や図形で扱う「ベクター」タイプの画像なので、拡大・縮小しても描画が荒くならないため、Retinaディスプレイ対応サイトなどでは頻繁に利用されています。

ファイルの拡張子は「.svg」または「.svgz」となり、「.svg」をgzip圧縮してファイル容量を小さくしたものが「.svgz」になります。

ウェブサイトでへの埋め込みに際しては「JPEG」「GIF」「PNG」などと同じ「画像」として扱えるため、通常のimg要素のsrc属性でファイルを指定するだけで使えるようになります。

<img src="sample-1.svg" width="90" height="90" alt="SVG画像のサンプル">
<img src="sample-2.svgz" width="90" height="90" alt="SVGZ画像のサンプル">

SVG画像のサンプルちなみにこの画像がSVG画像のサンプルになります。
ただし、前述したように、サーバー環境によってはブラウザー側で「.svg」「.svgz」を画像として認識してくれず、表示されないケースがあります。
そんなときは[.htaccess]ファイルに以下のコードを追加して対応します。

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

巷のブログでは「AddType」の部分を以下のように2行に分けて記述して紹介している記事もあります。

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

これはAddType image/svg+xml .svg .svgzと1行にまとめて書くことが可能です。
さらにSVGZファイルがgzip圧縮されたものだと認識させるために、AddEncoding gzip .svgzの1行も大切です。

また、補足になりますが拡張子の前のドット「.」は有っても無くてもどちらでも意味は同じになります。

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

以上をクリアすれば問題なくSVGを設置することができるはずです。是非お試しください。

こちらの記事もいかがですか?

アナタにオススメ!
同じカテゴリーの他の記事です。

Ads by Google