目次
ChromeとEdgeでSVGが表示できない
photoshopで出力したSVGファイルをブラウザで表示させようとした際に、↓のような画面になって画像が表示できないことがあります。確認してみたところ、Firefoxでは表示されたのですが、Chrome・Edgeでは表示することができませんでした。
![](https://dev.appswingby.com/home/wp-content/uploads/2021/03/svgでは表示することができません-1024x449.jpg)
2017年頃から表示できない問題が発生?
2017年頃からSGVをChromeで表示することができない問題があったようで、同問題の解決方法の書かれた記事がありましたが、「Chromeは表示できないが、Edge・Firefoxは表示できる」とする記事が多く、「ChromeとEdgeが表示できない」とする記事は見かけなかったような気がしますので、最近リリースされたEdgeのバージョンから仕様が変わったのかもしれません。
問題のファイルを編集
先人の書かれた記事を参考に、SVGファイルをテキストエディアで開き、
xlink:href="data:img/png;base64,
の”img”を”image”に変更します。
![](https://dev.appswingby.com/home/wp-content/uploads/2021/03/SVG_imgをimageに変更.jpg)
変更後、さっそく確認してみます。
変更したのに、表示できていません( ;∀;)
![](https://dev.appswingby.com/home/wp-content/uploads/2021/03/SVG_imgをimageに変更_結果は表示できませんでした.jpg)
ん?グレーからホワイトに変わっただけで、表示できていません。。。
もう一度、テキストエディアを見てみます。
先頭のimg変更だけではNG
![](https://dev.appswingby.com/home/wp-content/uploads/2021/03/SVGファイルをテキストエディアで開く-1024x284.jpg)
再度、テキストエディタで開いたSVGファイルを見てみると、なんと!今回表示させたいSVGファイルの中に、「xlink:href=”data:img/png;base64,”」という記述が3か所もありました。(;’∀’)
ということで、さっそく3か所すべての「xlink:href=”data:img/png;base64,”」を「xlink:href=”data:image/png;base64,”」に書き換えます。
無事、ChromeとEdgeでも、SVGファイルを表示することができました
![](https://dev.appswingby.com/home/wp-content/uploads/2021/03/jpegでは問題なく表示されます-1024x430.jpg)
無事、Chrome、Firefox、Edgeの3つのブラウザで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ビット) |