在网页中使用SVG

迈不过友情╰ 2021-07-26 18:02 594阅读 0赞

# [在网页中使用SVG][SVG] #

SVG可以作为一个独立的文件存在。但更多的时候，我们希望他能集成在某个更大的文档中，比如HTML。  
将SVG插入到HTML中主要有以下几种方式：

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

### **将SVG作为图像导入** ###

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

你需要确保你的[服务器支持`.svg`文件][.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>`*，你也可以把`.svg`文件嵌入到一个*`<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`。

[SVG]: https://www.cnblogs.com/sese/p/8669746.html
[.svg]: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Getting_Started
[background-image]: http://www.vanseodesign.com/css/background-properties/