ChromeでSVGが表示されない現象 - Qiita

特定のSVGファイルがChrome（少なくともv51.0.2704.84 から、2017年12月26日現在の最新バージョンである v63.0.3239.108まで）で表示されない現象があるようです。 特定のSVGファイルとは、image要素のxlink：href 属性が xlink：href = "data：img/png; と記述されているものです。 IE, Edge, FireFox, Safariのそれぞれ最新版ではこの現象は確認できませんでした。 解決法 テキストエディタでSVGファイルを開き、xlink：href = "data：img/png; (画像赤罫線で囲った箇所) をxlink：href = "data：image/png;と書き換えてやると正しく表示されます。 Photoshop, Illustratorの現行バージョンで書き出しを行うと、Chromeで表示されないx

[rikuo]

？マジか/マジだった。Photoshop CC 2018で確かにimg/pngになってた。Illustrator CC 2018（Windows 10）だと大丈夫だけれども、違うやり方があるのかな？

[k_gobo]

早く直してｗｗｗｗｗｗｗｗｗｗｗｗすごく悩んだｗｗｗｗｗｗｗｗｗｗｗｗ

[kithzmky]

svg Chrome Qiita ブラウザ

[itouhiro]

Chrome v51～最新v63まででPhotoshop/Illustratorの現行バージョン書き出しの img/png となっているSVGが表示されない。テキストエディタでSVGファイルを img/png → image/png 書き換えで正しく表示。

[mysticatea]

むしろなんで img/png で表示してるの...??