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でSV