サーバにUPしたSVGファイルが表示されない

ローカルではブラウザで表示できたSVGファイルが、サーバーにUPすると表示できなくなった場合の対処法。

原因

ブラウザでSVGファイルを表示するためのHTTPヘッダが出力されていない(SVGのMIME typeが定義されていない)

詳細:
MIME type とは、「拡張子からファイルの種類を判別できる機能」のこと。
ブラウザが文章や画像を表示する時には、HTTPヘッダのMIME Type設定を参照してファイルタイプを識別します。
「.svg」、「.svgz」という拡張子のMIME Typeが設定されていないと、ブラウザはその拡張子のファイルをどのように扱っていいのかわからず、表示することができません。

対応

SVGまたはSVGZを表示させるには、それぞれ以下のHTTPヘッダが出力されるように設定します。(SVG、SVGZのMIME type を定義します。)

ファイルタイプ HTTPヘッダ
.svg Content-Type: image/svg+xml
.svgz Content-Type: image/svg+xml
Content-Encoding: gzip

方法その1:自分自身がサーバ管理者の場合

httpd.confのセクションに次の行を追加し、サーバを再起動します。

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

方法その2:レンタルサーバの場合

.htaccessファイルを編集します。
レンタルサーバの設定画面から編集できる場合もあります。できない場合はドキュメントのトップディレクトリの.httaccessファイルを直接編集し、次の2行を追加します。

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

追記:
SVGファイルを埋め込むタグに直接MIME Typeを設定する方法もあります。というかこちらが基本ですね…!
例)
<embed src=”●●.svg” type=”image/svg+xml”  />

コメント

  1. […] 【.htaccess】SVGまたはSVGZ画像が表示されない時に確認すべき設定。その便利さゆえに、近ごろ爆発的に普及しつつある「SVG画像」または「SVGZ画像」ですが、サーバー環境によってはブラウザーでうまく表示されないケースがあります。今日紹介するのは、この「SVG画像」または「SVGZ画像」が…on-ze.comサーバにUPしたSVGファイルが表示されない | kotublogローカルではブラザウで… 未分類 .htacsss SVGスポンサーリンク (adsbygoogle = window.adsbygoogle || []).push({}); シェアするTwitterFacebookはてブPocketLINEコピーfouをフォローする fouへっぽこ開発室 […]

タイトルとURLをコピーしました