最終更新日: 2021年1月23日
ChromeでSVGの画像が表示されない場合の対処法！
ChromeでSVGの画像が表示されない場合の対処法を紹介します。SVGファイルの中身のxlink:href属性の値によってはChromeのブラウザだけ正常に表示されない場合があります。対処法を解説します。
コンテンツ [表示]
SVGファイルの画像がChromeで表示されない場合があります。
EdgeやFirefoxなど他のブラウザでは表示されるにも関わらず、Chromeだけ表示されない場合は下記の内容を参考にしましょう。
ChromeでSVGの画像が表示されない場合の対処法
ChromeではSVGファイルのxlink:href属性の値がdata:imgで始まっている場合に表示されない事があります。これはSVGファイルの中身を直接編集することで、対処が出来ます。
対処法
まずはSVGファイルをテキストエディターで開きます。
今回はATOMのエディターで開いています。
data:imgをdata:imageに書き換えましょう。最後にファイルを保存し、再度Chromeで正常にSVGファイルが表示されるか確認しましょう。
xlink:href属性の値を確認しましょう。SVGファイルの中身は様々な情報が入り混じっていますが、
<image />の頭の部分にxlink:href属性があるかと思います。