转 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>

参考资料

Styling And Animating SVGs With CSS