转 HTML页面中嵌入SVG的几种方式？
转自 https://www.cnblogs.com/lxg0/p/7766531.html
https://www.runoob.com/svg/svg-inhtml.html
你有N种理由使用SVG在页面中展示图像，
如它的矢量特性、广泛的浏览器支持、比JPEG和PNG更小的体积、可用CSS设置外观、使用DOM API操作以及各种可用的SVG编辑工具等。
可以用以下六种方式在页面文档中嵌入SVG：
1. 作为图片使用<img>标签
<img src="mySVG.svg" alt="" />
2. 作为CSS背景图片
.el {background-image: url(mySVG.svg);}
3. 作为对象用<object>标签引入
<object type="image/svg+xml" data="mySVG.svg">
<!-- 如果浏览器不支持，这里显示备选内容 -->
</object>
使用<object>的一大好处是可以提供浏览器不支持情况下的备选方案。
4. 使用<iframe>标签
<iframe src="mySVG.svg">
<!-- 如果浏览器不支持，这里显示备选内容 -->
</iframe>
如果想将SVG代码以及脚本和主页面彻底分离，<iframe>是个不错的选择。但是这样一来在主页面用 JavaScript操作SVG内容就变得稍微麻烦了，并且还有浏览器的同源策略限制。
5. 使用<embed>标签
<embed type="image/svg+xml" src="mySVG.svg" />
<embed>虽然不是HTML规范的一部分，但仍然被广泛支持。它原本是为了支持某些外部插件而存在的，比如 Adobe Flash插件就要依赖这个标签。但是它不能提供浏览器不支持时的备选显示内容。
6. 使用内联<svg>标签
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" …><!-- svg 内容 --></svg> 这是目前最常用的方式。
使用内联SVG的好处是，可以将CSS样式规则和控制脚本放在当前文档的任何位置，而不是限制在<svg> 标签中。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> </svg>
7. 链接到 SVG 文件 用 <a> 标签
<a href="circle1.svg">查看 SVG 文件</a>
