.htaccess でSVGのMIMEタイプを設定する

.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 を使った2カラム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 リーダービューで読めるみたい!
2018.08.20

コメント投稿フォーム

 

最近の投稿

カテゴリ

オススメ

カプセルトイ関連

ミク関連

アーカイブ

RSS Feed RSS Feed Atom Feed TopicXML アイコン
WebBoard