◆ img タグや background-image に data uri 形式で書く
◆ svg タグを直接 HTML の中に書く
画像ファイルを読み込むのではなく svg 画像のテキストを HTML 中に書いて表示する方法はいくつかあります

  • img タグの src に svg 画像を指定
  • css で background-image に svg 画像を指定
  • HTML に直接 svg タグを書く

どれでも表示できますが img タグと background-image は外部の画像ファイルを読み込むものです
そのため svg 画像を data URI 形式で指定します

<!doctype html>

<div><img id="a"></div>
<div id="b"></div>
<div><svg xmlns="http://www.w3.org/2000/svg" width="40" height="20"><text x="50%" y="50%" dy=".3em" text-anchor="middle" fill="black">TEXT</text></svg></div>

<style>
	div {
		height: 50px;
	}
	text{
		fill: red;
	}
	#b{
		background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="40" height="20"><text x="50%" y="50%" dy=".3em" text-anchor="middle" fill="black">TEXT</text></svg>');
		background-repeat: no-repeat;
	}
</style>

<script>
	a.src = `data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="40" height="20"><text x="50%" y="50%" dy=".3em" text-anchor="middle" fill="black">TEXT</text></svg>`
</script>

svgimgview

svg タグを使った場合は HTML の一部となるので CSS が有効なので色指定などをできます
赤色になってるのは 3 つめの svg タグを使ったもののみです

また 外部の画像として扱う方法では svg タグに xmlns 属性が必須です
省略すると画像を表示できません
HTML 中に書く svg タグの場合は省略しても大丈夫です