https://idea-hack.com/blog/50723/
Photoshopで作成されたSVG画像がChromeで表示されないときの対処方法

Photoshopで作成されたSVG画像がChromeで表示されないときの対処方法

PhotoshopでSVG画像を作成したのに、Chromeだけでうまく行かないときの対処方法

Photoshopを使ってWEBサイト向けにSVG画像を作成する時があります。この時、画像を一からイラストレーターで作り、そのベクターデータを加工する目的でPhotoshopで編集する場合、作成されたSVGの元データはベクターデータになるので、何も問題は起こりません。

しかし、ラスターデータが混じっている場合、ChromeではSVG画像が表示されないときがあります。

これを解決するには、テキストエディターでSVGのコードを編集してあげる必要があります。

解決方法

Step 1
SVG画像をテキストエディターで開く
SVG画像をテキストエディターで開きます。
Step 2
「data:img」 → 「data:image」へ置換
「data:img」 を探して 「data:image」 へ変換して、再度ファイルを保存します。これで解決します。
コードを変更していないと、SVGが表示されない
コードを変更することで、SVGが表示される