在网页中使用SVG

时间 2019-12-02

标签网页使用 svg 栏目 HTML 繁體版

原文原文链接

SVG能够做为一个独立的文件存在。但更多的时候，咱们但愿他能集成在某个更大的文档中，好比HTML。
将SVG插入到HTML中主要有如下几种方式：css

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

将SVG做为图像导入

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

<img src="example.svg" alt="example">

你须要确保你的服务器支持.svg文件，可能大多数都是支持的，可是仍是查一下的好。
同时你也能够在CSS中把.svg文件做为一个background-image导入。segmentfault

注意要加一个备用的.png图像，以防浏览器没法显示svg。浏览器

.svg-bg { 
    background: url("example.png"); /* fallback */
    background-image: url("example.svg"); 
}

不足：安全

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>框架内。代码以下：url

<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