ブラウザでSVGが表示されない。サーバー設定変更が必要。

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

<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を設定するものと思う。

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

Serve SVG as an Image on Apache with .htaccess

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