【WEB】ブラウザでSVG画像が表示されない

もくじ

SVG画像が表示されない

今回私の環境で観測できたのは、FirefoxSafariIEではSVG画像が表示されませんでした。

原因

ApacheなどにSVGを読み込む設定が書き込まれていないためにブラウザがSVGを画像として認識してくれないようです。

必要なコードを追記

自分がサーバ管理者の場合

Apacheの設定ファイルhttpd.confに以下のコードを追記します。

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

修正後はかならずApache再起動します。

レンタルサーバの場合

SVGファイルを埋め込む<img>タグにtype属性、width属性、height属性を設定します。

<img src="image.svg" type=”image/svg+xml” width="90" height="90" alt="SVG画像" />

Chromeで表示されない場合

過去にこちらに記事にしているので、あわせて確認してみてください。

bonoponz.hatenablog.com

参考URL

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

SVGとSVGZを表示するための.htaccessの設定方法 - Webデザイン - acky.info

【.htaccess】SVGまたはSVGZ画像が表示されない時に確認すべき設定。 - 株式会社オンズ

SVG 画像が表示できないと言われた場合 (Apache) - Qiita