HTML页面插入SVG的多种方式

<svg width="400" heihgt="300" id="testSvg">   <circle cx="100" cy="100" r="50" fill="red" stroke="black" strock-width="2" id="testCircle"></circle></svg>//可以用CSS控制SVG的样式，但属性与普通的网页元素不同<style type="text/css">   #testSvg {border:1px solid #ccc;}   #testSvg circle {   	fill: red;   	stroke: blue;   	stroke-width: 3;   }</style>//可以用JS操作SVG，制作简单的动画等<script type="text/javascript">   var circle = document.getElementById("testCircle");   circle.addEventListener("click", function(e) {   	console.log("Click circle ...");   	circle.setAttribute("r", 65);   }, false);</script>//除了用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 DOMvar embedSvg = document.getElementById("embedSvg").getSVGDocument();console.log("SVG DOM: ", embedSvg);		//使用<object>标签<object id="objectSvg" type="image/svg+xml" data="test.svg"></object>//获取SVG DOMvar objectSvg = document.getElementById("objectSvg").getSVGDocument();console.log("SVG DOM: ", objectSvg);//使用<iframe>标签<iframe id="iframeSvg" src="test.svg"></iframe>//获取SVG DOMvar 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);