SVG可以作为一个独立的文件存在。但更多的时候，我们希望他能集成在某个更大的文档中，比如HTML。

将SVG插入到HTML中主要有以下几种方式：

• 将 SVG 作为图像导入
• 将 SVG放入 iframe 中导入
• 将 SVG 作为object对象导入
• 使用内联 SVG

 

将SVG作为图像导入

这可能是将SVG导入HTML文档的最简单的方法。将.svg文件把它加到一个普通<img>标签内。

你需要确保你的，可能大多数都是支持的，但是还是查一下的好。

同时你也可以在CSS中把.svg文件作为一个导入。

注意要加一个备用的.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>，你也可以把.svg文件嵌入到一个<iframe>框架内。代码如下：

上面2种方法都可以使用CSS控制SVG的样式，如：

.example {
        display: block;     margin: 5em auto;     border-radius: 10px; }

 

使用内联SVG

你不必一定把SVG放在一个单独的文件中，因为你可以直接在HTML中嵌入SVG。

      
     
            ...    
       

直接嵌入的SVG会继承父文档的样式，默认情况下采用inline的方式进行显示。

 

总结：

SVG并不难使用。尤其，最简单的是，你可以在一个矢量图形应用程序中创建一个图像，然后将图像导出为一个.svg文件，然后把它放入到一个<img>、<object>或者<iframe>的HTML标签中。你也可以在CSS文件中放入.svg文件，把它作为一个background-image。

 

参考文档：