HTMLページにSVGを挿入するための様々な方法

<svg width="400" heihgt="300" id="testSvg">
   <circle cx="100" cy="100" r="50" fill="red" stroke="black" strock-width="2& quot; id="testCircle"></circle>
</svg>

// You can control the style of the SVG with CSS, but the properties are different from the normal web elements
<style type="text/css">
   #testSvg {border:1px solid #ccc;}
   #testSvg circle {
   	fill: red;
   	stroke: blue;
   	stroke-width: 3;
   }
</style>

// You can use JS to manipulate SVG, make simple animations, etc.
<script type="text/javascript">
   var circle = document.getElementById("testCircle");
   circle.addEventListener("click", function(e) {
   	console.log("Click circle ... ");
   	circle.setAttribute("r", 65);
   }, false);
</script>

//In addition to JS manipulation, you can use SVG's own animate to create animation effects
<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"& gt;</animate>
   </circle>
</svg>

//Use <img> tags
<img src="test.svg'" />
//or base64 encoding for SVG
<img src="data:image/svg+xml;base64,[data]" />

//use <embed> tags
<embed id="embedSvg" type="image/svg+xml" src="test.svg"></embed>
//Get the SVG DOM
var embedSvg = document.getElementById("embedSvg").getSVGDocument();
console.log("SVG DOM: ", embedSvg);
		
//Use <object> tag
<object id="objectSvg" type="image/svg+xml" data="test.svg"></object>
//Get the SVG DOM
var objectSvg = document.getElementById("objectSvg").getSVGDocument();
console.log("SVG DOM: ", objectSvg);

//Use <iframe> tag
<iframe id="iframeSvg" src="test.svg"></iframe>
//Get the SVG DOM
var iframeSvg = document.getElementById("iframeSvg").contentDocument;
console.log("SVG DOM: ", iframeSvg);

<style type="text/css">
	.svg-div {
		width:400px;
		height:300px;
		background:url("test.svg") no-repeat center / 50%;
		border:1px solid #ccc;
	}
</style>

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

var svgStr = new XMLSerializer().serializeToString(document.getElementById("testSvg"));
console.log(svgStr);