## 一、概述 SVG 是使用 XML 来描述二维图形和绘图程序的语言，SVG 于 2003 年 1 月 14 日成为 W3C 推荐标准，所有浏览器均支持 SVG 文件，可以直接显示，由于它是xml文件格式，所以，可被非常多的工具读取和修改（比如记事本）； * SVG 指可伸缩矢量图形 (Scalable Vector Graphics) * SVG 用来定义用于网络的基于矢量的图形 * SVG 使用 XML 格式定义图形 * SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失 * SVG 是万维网联盟的标准 * SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体 ## 二、实例 ``` <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/> </svg> ``` 效果：  ## 三、在HTML 页面中使用方式 1、`<embed>` 标签 ~~~ <embed src="rect.svg" width="300" height="100" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" /> ~~~ 2、`<object> `标签 ~~~ <object data="rect.svg" width="300" height="100" type="image/svg+xml" codebase="http://www.adobe.com/svg/viewer/install/" /> ~~~ 3、`<iframe>` 标签 ~~~ <iframe src="rect.svg" width="300" height="100"> </iframe> ~~~ ## 四、vue中使用 通过vue-svg-icon-loader； ## 五、svg定义 由`<svg>`作为顶级容器的，各种svg元素标签组成的xml文件；具体的svg元素参考手册：https://www.w3school.com.cn/svg/svg_reference.asp