## 一、概述 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