ブラウザで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
するとSVGがきちんと表示されるようになった。