ChromeでSVG画像が表示されない場合の対処法

こんにちは。菜笑[なえ] (@nae310_)です。

今回はGoogleChromeでSVG画像が表示されないときの対処法についてです。

解決方法

今回表示されなかったコードはこちらです。

<svg
 xmlns="http://www.w3.org/2000/svg"
 width="46" height="46">
<image  x="0px" y="0px" width="46px" height="46px"  xlink:href="data:img/png;base64,
（略）

これのxlink:href="data:img/png;base64, となっている部分を、xlink:href="data:image/png;base64, とすれば表示されました！

img ではなく、image とする必要があるみたいですね。

おわりに

このimg では表示されないというのは、Chromeだけみたいです。

Chromeだけ表示されるならまだしも、Chromeだけ表示されないなんて珍しい感じがします。

ちなみにPhotoshopでSVGで書き出すとimg となっているので、気をつけてください。

今回は短いですが以上です。

SNS

Twitter：@nae310_
Instagram：310nae