在网页中使用SVG

时间:2022-02-24 12:56:01

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

 

参考文档:

https://segmentfault.com/a/1190000004447771

https://www.w3cplus.com/svg/svg-basics.html