HTML ページに SVG を挿入する複数の方法

<svg 幅="400" 高さ="300" id="testSvg">
   <circle cx="100" cy="100" r="50" fill="red"strok="black" strok-width="2" id="testCircle"></circle>
</svg>

// CSS を使用して SVG のスタイルを制御できますが、属性は通常の Web 要素の属性とは異なります <style type="text/css">
   #testSvg {境界線:1px 実線 #ccc;}
   #testSvg 円 {
   	塗りつぶし: 赤;
   	ストローク：青;
   	ストローク幅: 3;
   }
</スタイル>

//JS を使用して SVG を操作したり、簡単なアニメーションを作成したりできます。<script type="text/javascript">
   var 円 = document.getElementById("testCircle");
   円.addEventListener("クリック", 関数(e) {
   	console.log("円をクリックしてください...");
   	円に属性を設定します。
   }、 間違い）;
</スクリプト>

//JS を使用するだけでなく、SVG 独自の animate を使用してアニメーション効果を作成することもできます<svg width="400" height="300" id="testSvg">
   <circle cx="100" cy="100" r="50" id="testCircle">
   	<animate attributeName="cx" from="100" to="300" dur="2s" repeatCount="indefinite"></animate>
   </circle>
</svg>

//<img> タグを使用する <img src="test.svg'" />
//または SVG の base64 エンコード <img src="data:image/svg+xml;base64,[data]" />

//<embed> タグを使用します <embed id="embedSvg" type="image/svg+xml" src="test.svg"></embed>
//SVG DOMを取得する
var 埋め込みSVG = document.getElementById("埋め込みSVG").getSVGDocument();
console.log("SVG DOM: ", 埋め込みSvg);
		
//<object> タグを使用します <object id="objectSvg" type="image/svg+xml" data="test.svg"></object>
//SVG DOMを取得する
var objectSvg = document.getElementById("objectSvg").getSVGDocument();
console.log("SVG DOM: ", objectSvg);

//<iframe> タグを使用する <iframe id="iframeSvg" src="test.svg"></iframe>
//SVG DOMを取得する
var iframeSvg = document.getElementById("iframeSvg").contentDocument;
console.log("SVG DOM: ", iframeSvg);

<スタイル タイプ="text/css">
	.svg-div {
		幅:400ピクセル;
		高さ:300px;
		background:url("test.svg") 繰り返しなし 中央 / 50%;
		境界線:1px実線 #ccc;
	}
</スタイル>

<div class="svg-div"></div>

var svgStr = new XMLSerializer().serializeToString(document.getElementById("testSvg"));
コンソールにログ出力します。