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

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


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

画像関連記事

関連記事をもっとみる

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でお借りしました。 ...

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

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

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

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

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

コメント

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