Ratinaなど、高解像度なディスプレイも流行ってきたし、SVG形式(Scalable Vector Graphics)をサイトのコンテンツ一部に利用してみようかと、PNG画像だったファイルをSVGに変更してみた。

html
<img src="logo.png"> ↓ <img src="logo.svg">

ローカルPCでテストしてみたあと、サーバーにアップしてみた。
すると、ローカルでテストした際には問題がなかったSVGが表示されない。

SVGのURLを直接表示すると、SVGが表示される。SVGファイル自体は存在するようだ。
おかしいと思いChromeの開発ツールでsvgのmime typeを調べてみると

text/xml

となっている。このサイトを参考に.htaccessに設定を追加した。SVGとSVGZのmime typeを設定するものと思う。

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

Serve SVG as an Image on Apache with .htaccess

するとSVGがきちんと表示されるようになった。