ChromeとEdgeでSVG画像が表示されない場合の解決策

SVGに画像が埋め込まれている場合や、Photoshopでスマートオブジェクトが含まれたものをSVGとして書き出した場合、
そのSVGはSafariやFirefoxでは表示されるのにChromeやEdgeでは表示されない場合があります。

解決策

SVGファイルをテキストエディタで開き、画像が埋め込まれた箇所を確認します。

xlink:href="data:img/png;

「data:img」となっているところが表示されない原因です。
これを「data:image」となるように書き換えます。

xlink:href="data:image/png;

この書き換えを行うと、ChromeやEdgeでも表示されるようになります。
画像を埋め込んだSVG自体使用頻度としてあまりないとは思いますが、
SVGが表示されない場合の原因の一つとして覚えておくといいかもしれません。


参考:
ChromeでSVGが表示されない現象

\弊社では一緒に働いてくれる仲間を募集しております/

エントリーはこちらから▼

Related article

おすすめ関連記事