本サイトではアフィリエイト広告を利用しています
Apache で SVG

サーバー 設定

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

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 は視覚的に見せるフォーマットであり、画像として届けたいわけです。

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

-サーバー, 設定
-, ,