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

ChromeでSVGの画像が表示されない場合の対処法を紹介します。SVGファイルの中身のxlink:href属性の値によってはChromeのブラウザだけ正常に表示されない場合があります。対処法を解説します。

コンテンツ [表示]

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

SVGファイルの画像がChromeで表示されない場合があります。

EdgeやFirefoxなど他のブラウザでは表示されるにも関わらず、Chromeだけ表示されない場合は下記の内容を参考にしましょう。

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

ChromeではSVGファイルのxlink:href属性の値がdata:imgで始まっている場合に表示されない事があります。これはSVGファイルの中身を直接編集することで、対処が出来ます。

対処法

まずはSVGファイルをテキストエディターで開きます。

今回はATOMのエディターで開いています。

SVGファイルのxlink:href属性
次にこのようにxlink:href属性の値を確認しましょう。

SVGファイルの中身は様々な情報が入り混じっていますが、<image />の頭の部分にxlink:href属性があるかと思います。
xlink:href属性の値を書き換える
このようにdata:imgdata:imageに書き換えましょう。

最後にファイルを保存し、再度Chromeで正常にSVGファイルが表示されるか確認しましょう。

今だけ
無料

【7月31日まで】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを7月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次