サーバに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 を定義します。）

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

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

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

方法その２：レンタルサーバの場合

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

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

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