SVG を Apache から画像イメージとして届けるには？

2020年6月19日

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
AddType image / svg + xml svg svgz
AddEncoding gzip svgz

SVG を XML（ただのテキストファイル）としてクライアントに届けられても、受け取る側は解釈しづらい文字列を見せられるだけですので、うれしくありません。SVG は視覚的に見せるフォーマットであり、画像として届けたいわけです。

小ネタでしたが、この種の問題に悩んだことある人は、上の方法で速攻解決を試してみてください。

Connection Information