SVG ファイルは拡大縮小しても崩れず、編集性・汎用性が高いというメリットのあるフォーマットです。フォーマットそのものはバイナリではなく、テキストです。2001年ごろにすでにあった技術ですが、当初は対応しているブラウザも少なく、レンダリングにも時間がかかることもあって、マイナーなものでした。
昨今は、ブラウザにも余裕が出てきたこともあり、スマホであっても SVG には対応しています。非常に柔軟なフォーマットとして認知されていますが、サイトの再設計を作成するとき、img タグの中で SVG 画像を使ってみたら、ローカルでは問題なく機能し、表示されていました。
しかし、自前サーバーにアップロードしてブラウザで表示させてみると、画像が壊れてしまい(表示はされる)、コンソールにメッセージが出ます。
messages
Resource interpreted as Image but transferred with MIME type text/xml: "https://192.168.1.100/logo.svg".
ユーザーにとっては、ある種のエラーメッセージと同じくらい深刻です。メッセージの意味は「その SVG は画像だと認めますが、MIME タイプは text/xml でクライアントに転送します」
たしかに、予想外のメッセージです。サーバー的に言えば、「SVG って画像のフリしてるけど、中身はただのテキストだろ?だから、テキストファイルとしてクライアントに届けてやるよ!」って感じなのでしょうが、ユーザー側からすれば「ヤメロ!」って感じです。
テスト環境で、ローカルと運用サーバーを分けている方は、時折、予想外(すっから頭の片隅に追いやられていた)のエラーもどきにびっくりすることがあります。
.htaccess で問題解決!
エラーもどきであってエラーではないので、.htaccess を設定することで問題が解消されます。
.htaccess
AddType image / svg + xml svg svgz
AddEncoding gzip svgz
SVG を XML(ただのテキストファイル)としてクライアントに届けられても、受け取る側は解釈しづらい文字列を見せられるだけですので、うれしくありません。SVG は視覚的に見せるフォーマットであり、画像として届けたいわけです。
小ネタでしたが、この種の問題に悩んだことある人は、上の方法で速攻解決を試してみてください。