Photoshopで書き出すSVG画像がChromeで表示されないときの対策

以前、PhotoshopでSVG画像を書き出してChromeで見ようとしたときに表示されないという問題がありました。

※2021年2月現在のChromeのバージョンでも書き出したSVGが見れないようです。

ほかのブラウザで見ても表示されるのに何故かChromeだけ表示されないということに当時は焦りましたね。

なぜ表示されないのか….。

SVG画像がChromeで表示されない原因

SVG画像が表示されなかったときにhtmlやcssに問題がないか見ましたがどうやらhtmlやcssに原因があるのではなくSVG画像のデータに問題があることがわかりました。

SVG画像をテキストエディタで開いてみましょう。

<image>というタグのなかに「xlink:」という記述があると思います。

xlink:href="data:img/png;

この記述に問題がありました。

上記の記述を下記のように修正します。

xlink:href="data:image/png;

修正したら保存してChromeで見てみましょう。

画像ファイルのタイプを指定をしている箇所に問題があり表示がされないという原因になっているようです。

この現象はけっこう前から起きているようですね。

いつ解決されるのだろう。

書き出すたびにファイルの記述を修正するのも大変ですよね。

ChromeだとうまくSVGが表示されないという現象に翻弄されてしまう人もいると思いますが画像ファイルのタイプを修正することで表示されるようになるということを覚えておきましょう。