SVG可以作为一个独立的文件存在。但更多的时候，我们希望他能集成在某个更大的文档中，比如HTML。
将SVG插入到HTML中主要有以下几种方式：
- 将 SVG 作为图像导入
- 将 SVG放入 iframe 中导入
- 将 SVG 作为object对象导入
- 使用内联 SVG
将SVG作为图像导入
这可能是将SVG导入HTML文档的最简单的方法。将.svg文件把它加到一个普通<img>标签内。
<img src="example.svg" alt="example">
你需要确保你的服务器支持.svg文件，可能大多数都是支持的，但是还是查一下的好。
同时你也可以在CSS中把.svg文件作为一个background-image导入。
注意要加一个备用的.png图像，以防浏览器无法显示svg。
.svg-bg { background: url("example.png"); /* fallback */ background-image: url("example.svg"); }
不足：
SVG作为图像引用时，
-
大多数浏览器不会加载SVG自身引用的文件(其他图像，外部脚本，字体文件等)
-
依据浏览器的安全策略，SVG中定义的脚本也可能不会执行
使用Object 或 iframe导入SVG图像
和把SVG作为图像导入相似，你可以把它作为一个<object>导入，通过data属性链接要导入的.svg文件。注意，MIME type必须是image/svg+xml。代码如下：
<object type="image/svg+xml" data="example.svg" class="example"> My Example SVG </object>
相比使用<object>，你也可以把.svg文件嵌入到一个<iframe>框架内。代码如下：
<iframe src="example.svg" class="example"></iframe>
上面2种方法都可以使用CSS控制SVG的样式，如：
.example { display: block; margin: 5em auto; border-radius: 10px; }
使用内联SVG
你不必一定把SVG放在一个单独的文件中，因为你可以直接在HTML中嵌入SVG。
<!DOCTYPE html> <html> <body> <svg> ... </svg> </body> </html>
直接嵌入的SVG会继承父文档的样式，默认情况下采用inline的方式进行显示。
总结：
SVG并不难使用。尤其，最简单的是，你可以在一个矢量图形应用程序中创建一个图像，然后将图像导出为一个.svg文件，然后把它放入到一个<img>、<object>或者<iframe>的HTML标签中。你也可以在CSS文件中放入.svg文件，把它作为一个background-image。
参考文档：