photoshopで出力したSVGファイルがChromeやEdgeで表示できない場合の対処法

ChromeとEdgeでSVGが表示できない

photoshopで出力したSVGファイルをブラウザで表示させようとした際に、↓のような画面になって画像が表示できないことがあります。確認してみたところ、Firefoxでは表示されたのですが、Chrome・Edgeでは表示することができませんでした。

2017年頃から表示できない問題が発生？

2017年頃からSGVをChromeで表示することができない問題があったようで、同問題の解決方法の書かれた記事がありましたが、「Chromeは表示できないが、Edge・Firefoxは表示できる」とする記事が多く、「ChromeとEdgeが表示できない」とする記事は見かけなかったような気がしますので、最近リリースされたEdgeのバージョンから仕様が変わったのかもしれません。

問題のファイルを編集

先人の書かれた記事を参考に、SVGファイルをテキストエディアで開き、

xlink:href="data:img/png;base64,

の”img”を”image”に変更します。

変更後、さっそく確認してみます。

変更したのに、表示できていません( ;∀;)

ん？グレーからホワイトに変わっただけで、表示できていません。。。

もう一度、テキストエディアを見てみます。

先頭のimg変更だけではNG

再度、テキストエディタで開いたSVGファイルを見てみると、なんと！今回表示させたいSVGファイルの中に、「xlink:href=”data:img/png;base64,”」という記述が3か所もありました。(;’∀’)

ということで、さっそく３か所すべての「xlink:href=”data:img/png;base64,”」を「xlink:href=”data:image/png;base64,”」に書き換えます。

無事、ChromeとEdgeでも、SVGファイルを表示することができました

無事、Chrome、Firefox、Edgeの３つのブラウザでSVGファイルを開くことができました。

テスト環境

今回テストしてみた環境は、OSがWindows10、ブラウザのバージョンは以下の通りです。

Chrome	89.0.4389.82（Official Build） （64 ビット）
Firefox	86.0 (64 ビット) 2021/3/11最新バージョン
Microsoft Edge	バージョン89.0.774.45 公式ビルド(64ビット)