.htaccess でSVGのMIMEタイプを設定する : ういすぷの記録帳

最近はロゴなどの単純画像をSVGで利用することが増えてきたのですが、テスト用サーバでうまく利用できませんでした。
たとえば、DIVやBUTTONタグの背景「background-image:url()」の外部ファイルを指定したときに表示されない事がわかりました。


CSSで背景の画像を指定すると、画像が表示されず変だなと調べてみました。
ローカルでは表示できるので、サーバ上の画像を直接アクセスしてみたら、表示されるのではなく、ダウンロードされる事でピンっと来ました。
ああ、ブラウザがファイルの種類を理解していないと。

そうです。
MIMEタイプの指定がされていませんでした。
原因が分かれば後は速いです。MIMEを指定して上げたら良いのです。

解決策

SVGに対して次のMIMEタイプを指定することで、SVGファイルがブラウザで表示されるようになります。
※ ダウンロードではなく、表示される場合は問題ありません。


SVGMIMEタイプ
image/svg+xml svg
image/svg+xml svgz

※ svgz はgzipで圧縮したSVGになります。(gzipはzipと別物です。ご注意ください）

.htaccessの設定

通常のサーバでは何も設定しなくても利用できますが、不運にも設定されていない場合には.htaccessで指定してみてください。
なおWebサーバの管理者であれば、mime.types や httpd.conf を設定してください。

次の2行を.htaccessに追加するだけです。
AddType image/svg+xml svg svgz
AddEncoding gzip svgz

参考

ミケネコの htaccess リファレンス
Linuxコマンド【 gzip 】ファイルを圧縮・展開（Linux入門 - Webkaru）
ブラウザに圧縮SVG (.svgz) を表示する（Inkscape@JP）



いやはや、問題が分かるまでちょいと手間取っちゃいました。
あとは、眠たいときはダメですね。頭が働いていません。エラーやバグは、一度休憩してからが良いですね。
シエスタ大事！


□ 関連記事
・[CSS] Flexbox を使った２カラム3カラム分けのメモ
・Firefoxの設定（プロファイル）保存場所メモ
・TLS1.0/1.1無効化に伴うサイト表示について
・ぱんぱかぱ〜〜〜ん　集中線（放射線）撮影用背景
・iPhoneの自動再生を停止する
・くるくる回す CSSメーカー
・iTunes のインストールが失敗し「アセンブリ'Microsoft.VC80.CRT,Type="win32",version="8.0.50727.6195",publicKey Token="1fc8b3b9a1e3b",prpcessorArchitecture="amd64"'…」が出たときの対応
・HOS MASTER DISK
・全ページSSL始めました！
・ういすぷのブログが、Firefox リーダービューで読めるみたい！