その便利さゆえに、近ごろ爆発的に普及しつつある「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」「.svgz」を画像として認識してくれず、表示されないケースがあります。
そんなときは［.htaccess］ファイルに以下のコードを追加して対応します。
AddType image/svg+xml .svg .svgz AddEncoding gzip .svgz
巷のブログでは「AddType」の部分を以下のように２行に分けて記述して紹介している記事もあります。
AddType image/svg+xml .svg AddType image/svg+xml .svgz
これはAddType image/svg+xml .svg .svgzと１行にまとめて書くことが可能です。
さらにSVGZファイルがgzip圧縮されたものだと認識させるために、AddEncoding gzip .svgzの1行も大切です。
また、補足になりますが拡張子の前のドット「.」は有っても無くてもどちらでも意味は同じになります。
AddType image/svg+xml .svg .svgz AddType image/svg+xml svg svgz
以上をクリアすれば問題なくSVGを設置することができるはずです。是非お試しください。
ウェブサイトでお困りのときはオンズにお任せください！
