Photoshopで書き出したsvgファイルはdata:img/pngだと表示できない

Photoshopで書き出したSVGファイル

PhotoshopではSVGファイルでの書き出しが可能だが作成したものがビットマップ画像を含むものだとHTMLのimgタグで読み込んでも画面上に表示されないので注意が必要だ。(iOS, Safariなどは表示可能)

SVGファイルが表示されない原因と対処法

SVGファイルが表示されないのはSVGファイル内で「data:img/png」となっていることが原因です。

エディタで開いて「data:image/png」に置換すれば表示されます。

Photoshopで書き出したSVGファイルはブラウザに直接ドラッグ&ドロップすると表示されるので原因がわからないと、なぜ表示されないのか気づきにくい。

data:img/pngとdata:image/pngのSVGを読み込んだサンプル