【Chrome対応】SVG形式の画像が表示されない場合の対処法

公開日 : 2022.10.11

コーディング

Chrome以外のブラウザではSVG画像が問題なく表示されているのに、なぜかChromeだけ表示されない場合があります。「THE・実務」といった感じですね。
今回はChromeのみSVG画像が表示されない場合の対処法を紹介します！

SVG画像が表示されない「原因」

表示されていない、、、、、

SVG画像の中身を確認してみると、下記のようになっていると思います。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="420" height="184" viewBox="0 0 420 184">
  <image id="svgImage" data-name="グループ 477" width="420" height="184" xlink:href="data:img/png;base64・・・省略"/>
</svg>

「xlink:href=”data:img/png”」の「data:img」が悪さをしています。

そうChromeの場合、「xlink:href」の属性値が「data:img」となっていると表示されないことがあります。

対処法

SVGファイルの中身を編集することで対処できます。エディタで開いて確認してみましょう！

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="420" height="184" viewBox="0 0 420 184">
  <image id="svgImage" data-name="グループ 477" width="420" height="184" xlink:href="data:img/png;base64・・・省略"/>
</svg>

「data:img」→「data:image」に変更し保存！表示を確認してみましょう。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="420" height="184" viewBox="0 0 420 184">
  <image id="svgImage" data-name="グループ 477" width="420" height="184" xlink:href="data:image/png;base64・・・省略"/>
</svg>

無事表示されましたか？

なぜ、表示されるのもあれば表示されないものもあるのか？

「現行のPhotoShop、Illustratorでsvg形式の画像を書き出すと「data:img」の状態で書き出される」から。

最近はXDからコーディングする機会が多く特に気にしていませんでしたが、XDで書き出した場合は「data:image」の状態で最初から書き出されています。

今回はPhotoShopからのコーディングの際に表示されなくなる現象が発生し、詰まってしまいました、、、。

PhotoShop2022だとSVGファイルの書き出しはサポート外

PhotoShop2022の場合、SVGファイルの書き出しはサポート対象外になっていますが、設定を変更することで問題なく書き出すことが可能です。

書き出し環境設定→オプション→従来の「書き出し形式」を使用を有効で解決!!

このリリースの Photoshop では、「書き出し形式」オプションを使用して、Photoshop ドキュメントを SVG として書き出す機能はサポートされなくなりました。低い使用率と制限のため、「SVG として書き出し」機能は廃止されています。詳しくは、Photoshop での「SVG として書き出し」の廃止を参照してください。
引用元：Photoshop でのファイルの書き出し

PhotoShopからのコーディングがそもそも古いのかもしれませんね、、、、、、、、