ChromeでSVGの画像が表示されない場合の対処法

SVG画像が、PCのGoogle Chromeで表示されず、iPhoneのsafariでは表示される現象の対処法についてです。

Adobe関連記事

• 

  イラレで作ったPDFファイルにハイパーリンクを挿入する

• 

  ChromeでSVGの画像が表示されない場合の対処法

• 

  Photoshopで「別名で保存」でPDFへ出力ができないときに確認すること

• 

  イラレで作成した重たいPDFを保存時にファイルサイズを軽くする

SVG画像の表示されない現象

動作確認をしていた時にimgタグのsrc属性で読み込んだSVG画像が、PCのGoogle Chromeで表示されず、iPhoneのsafariでは表示される現象に遭遇。

念のためSVG画像のURLに直接アクセスしてみると、表示される…。
キャッシュクリアしても変わらない…。

この現象は、Google Chromeでのみ起こるそうです。

SVG画像をエディタで開く

該当のSVG画像をエディタで開きソースを編集することで解決できます。

余談ですが下記では、SVG画像にcssを適用しています。

SVG画像をcssのプロパティで色や大きさなどのスタイルを変更する

SVG画像をhtmlに埋め込み、cssのプロパティで色や大きさなどのスタイルを変更する方法 css関連記事 svgのデータは「icooon-mono」さんからのデータをsvgでお借りしました。 ...

mugenweb-note.com

2018.03.07

SVG画像のソースを修正する

ソースの中から、xlink:href="data:img/png;を検索します。
その部分をxlink:href="data:image/png;と変更し保存します。

該当箇所が複数ある場合があるので、注意しましょう。

それをサーバーへアップするだけで解決します。

PhotoshopやIllustratorで書き出したSVGファイルは、imgのままなので気を付けましょう！