ところで、SVGファイルを使ってアイコン画像を表示させようと思いました。このブログはエックスサーバーで動いているんですが、デフォルトではSVGファイルがうまく表示されないんですね。MIME設定が必要とのこと。

もし似たようなことで困っている方がいらっしゃいましたら、ご参考ください。

サーバーで設定する

エックスサーバーを例にします。サーバーパネルにアクセスしてログインします。

ログイン後「MIME設定」をクリックして「MIME設定の追加」をクリックします。下の画像が表示されます。

入力欄に以下の「MIMEタイプ」「拡張子」をそれぞれ入力します。ここでポイントなのは「svg」[svgz]拡張子を追加することです。svgzはsvgファイルを圧縮させたものなので、有効になるように追加しているっていう具合です。

1. image/svg+xml .svg
2. image/svg+xml .svgz

というわけで、追加後に一覧をクリックすると、以下のようになっていると思います。

以上で設定完了です。ちなみに私のサイトでは、feedlyのアイコンをsvgで表示させています。（もしよろしければ・・・勢いでfeedlyでブログを購読いただけますと嬉しいです。）やっぱりベクターデータはキレイですね。拡大・縮小しても画像描写の劣化がなく、いい感じです。

ブラウザ上で画像を拡大・縮小しても劣化がなくていい感じ

MIME設定したのに表示されない！という場合は

ページのキャッシュが効いている可能性があります。例えばWindowsでChromeブラウザを使っている場合「Shift+F5」キーなどでスーパーリロードしましょう。

まとめ

というわけで「SVGファイルが表示されない！」という場合は、サーバーに適切なMIMEタイプの設定がされているかどうか確認されるといいですね。今回はエックスサーバーを例にしましたが、他のレンタルサーバーなどでもやることはだいたい同じです。SVGファイルがうまく表示されない場合は、MIMEタイプを確認しましょう～。

例えばロリポップですと、こちらの記事「0032-130528 SVG がうまく表示されない場合は、サーバーの設定を確認してみる」が大変参考になります。今回ご紹介したエックスサーバーの設定方法に関しては「カメぞうのメモ書き」さんのこちらの記事を参考にしました。大変助かりました。ありがとうございます！

また「そもそもSVGってなんだ？」という場合はScalable Vector Graphicsをご参考ください。