SVG画像が認識されないときの確認と対応方法、MIMEタイプとヘッダー情報の確認方法について

開発環境では表示されていたのにステージング環境ではSVGが表示されないということがあった。

コード的には間違っていないし、キャッシュということでもない。。。
そもそもまるっとファイルを全てアップしているからファイルが漏れているということもない。。。

そんなときはSVG画像がテキストファイルとして認識されている可能性がある。

どういうことかと言うのは基本的なHTMLの話になるが、MIMEタイプが関係している。

MIMEタイプに関しては下記が参考になった。
MIMEタイプってなんだ？ - Qiita

MIMEタイプをブラウザのヘッダー情報で確認

実際に開発環境、ステージング環境でMIMEタイプを確認してみる。

Chromeの場合
開発モードのインスペクタを開く。（右クリック→要素の検証でも可能）
Network　→　Header　→　（ここで更新して再読込）→　該当のSVGファイルを選択　→　ResponceHeaderで「Content-Type: text/plain」となっていたらアウト。
つまりテキストとして認識されていることになる。

本来であれば「Content-Type: image/svg+xml」となっているのが正常。

解決方法

Apacheの場合、サーバの設定によるが、はじめから対応していればそもそもこんなことにはなっていない。
対応していない場合はApacheの設定を確認するか、できない場合は.htaccessに下記を記載する。
AddType image/svg+xml .svg .svgz
AddEncoding gzip .svgz