imgタグで埋め込んだSVGが表示されない

imgタグを使ってSVGを埋め込んだ時にうまく表示されないことがあったので、その際の対応方法をメモしておきます。

サンプルコード

次のようなSVGを埋め込んでみます。

test.svg

<svg width="50" height="50" viewBox="0 0 50 50">
	<rect width="50" height="50" x="0" y="0" fill="blue" />
</svg>

直接HTMLに埋め込む方法と合わせて試してみます。

HTML

<img src="test.svg">

<svg width="50" height="50" viewBox="0 0 50 50">
	<rect width="50" height="50" x="0" y="0" fill="blue" />
</svg>

直接埋め込みの方は表示されましたが、imgタグで埋め込んだ方は表示されませんでした。
imgタグで表示されない場合のデモページ
　

調べてみると、imgタグで埋め込む場合はxmlns属性が必須のようです。
SVGファイルを以下のように変更して試してみます。

test.svg

<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50">
	<rect width="50" height="50" x="0" y="0" fill="blue" />
</svg>

属性に「xmlns=”http://www.w3.org/2000/svg”」を追加しました。
先ほどと同様に読み込んでみます。

HTML

<img src="test.svg">

<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50">
	<rect width="50" height="50" x="0" y="0" fill="blue" />
</svg>

imgタグの方も正しく表示させることができました。
imgタグで表示される場合ののデモページ
　

【参考サイト】

• ASCII.jp：サンプルコードで学ぶ SVGの読み方、書き方 (1/2)｜本気で使いこなす「SVG」再入門【2015年版】