ローカルで表示されていたsvgが、サーバー環境で表示されないとき。

xfreeのサーバーでアップロードし作成したサイトを見たときsvgの部分だけ表示出来ませんでした。(他のpngとかは問題なし)

画面でいうとこんな感じです。

最初はアセットパイプラインかなんかが影響してるのかなって思ったのですが、調べていると拡張子のメタ情報が追加されてないことが原因とわかりました。

実際には以下のコードを.htaccssに追加し、svgをサーバー環境で認識させました。

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

これで無事SVG画像が表示されました。

ちなみにAddTypeとAddEncodingを調べてみましたが、AddTypeがメタ情報に.svgと.svgzを認識させるコードで、AddEncodingが.svgzがgzipである事を認識させるコードらしいです。

補足

.htaccess(ドット　エイチティ　アクセス)はwebサーバーの動作制御系のファイルです。

サーバーのhome dir(ホームディレクトリ)配下に配置します。
※ホームディレクトリとは基本的にはエントリーポイントであるindex.htmlが設置されている階層のことです。