Photoshopで書き出したSVGファイルがブラウザで表示できない原因と対処法

Adobe Photoshopで書き出したSVGファイルがブラウザで表示されないときの原因と対処法について。

ブラウザによっては表示できる場合もあるようですが、Google Chromeで確認するとSVGファイルが空白になってしまいます。SVGが表示されない原因は、SVGファイル内のデータが「data:img/png」となっているためです。

Photoshopで書き出したSVGが表示されない場合

Photoshopで書き出したSVGファイルをエディタで開くと以下のような記述があると思います。

data:img/png

この「img」の個所を「image」に書き換えます。

data:image/png

これで解決します。

この問題は2017年末あたりのPhotoshopから起きている模様。Adobe Illustratorでも同じ現象が報告されていますのでご注意ください。