聲明：SVG 雖然也是標簽，但它不是 HTML5，標題加了 HTML5 只是為了與 canvas 放到一起。
一、為什么要學 SVG ?
SVG 意為可縮放矢量圖形（Scalable Vector Graphics），使用 XML 格式定義矢量圖形。其他的圖像格式都是基於像素的，但是 SVG 沒有單位的概念，它的20只是表示1的20倍，所以 SVG 繪制的圖形放大或縮小都不會失真。
與其他圖像比較，SVG 的優勢有以下幾點：
- SVG 可以被多個工具讀取和修改。
- SVG 與其他格式圖片相比，尺寸更小，可壓縮性強。
- SVG 可任意伸縮。
- SVG 圖像可以隨意地高質量打印。
- SVG 圖像可以添加文本和事件，還可搜索，適合做地圖。
- SVG 是純粹的 XML，不是 HTML5。
- SVG是W3C標准
二、SVG 形狀元素
2.1、svg 標簽
SVG 的代碼都放到 svg 標簽呢，SVG 中的標簽都是閉合標簽，與html中標簽用法一致。svg的屬性有：
- 有width和height，指定了svg的大小。
eg：畫一條直線，完整代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body style="height:600px;"> <svg width="300" height="300"> <line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="20"></line> </svg> </body> </html>
上述 svg 設置的寬高沒有帶單位，此時默認是像素值，如果需要添加單位時，除了絕對單位，也可以設置相對單位。
- viewBox 屬性
使用語法：<svg viewBox=" x1,y1,width,height "></svg>
四個參數分別是左上角的橫縱坐標、視口的寬高。表示只看SVG的某一部分，由上述四個參數決定。
使用 viewBox 之后，相當於svg整體大小不變，只能看到 viewBox 設置部分，視覺上被放大。
2.2、SVG 如何嵌入 HTML
SVG 的代碼可以直接嵌入到 html 頁面中，也可以通過 html 的embed、object、iframe嵌入到html中。嵌入的時候嵌入的是 SVG 文件，SVG 文件必須使用 .svg 后綴。分別介紹各種方法如何使用？
2.2.1、embed 嵌入：
使用語法：<embed src="line.svg" type="image/svg+xml"></embed>
src是SVG文件路徑，type 表示 embed 引入文件類型。
優點：所有瀏覽器都支持，並允許使用腳本。
缺點：不推薦 html4 和 html 中使用，但 html5 支持。
2.2.2、object 嵌入：
使用語法：<object data="line.svg" type="image/svg+xml"></object>
data 是 SVG 文件路徑，type 表示 object 引入文件類型。
優點：所有瀏覽器都支持，支持 html、html4 和 html5。
缺點：不允許使用腳本。
2.2.3、iframe 嵌入：
使用語法：<iframe width="300" height="300" src="./line.svg" frameborder="0"></iframe>
src是 SVG 文件路徑，width、height、frameborder 設置的大小和邊框。
優點：所有瀏覽器都支持，並允許使用腳本。
缺點：不推薦 html4 和 html 中使用，但 html5 支持。
2.2.4、html中嵌入：
svg 標簽直接插入 html 內容內，與其他標簽用法一致。
2.2.5、連接到svg文件：
使用 a 標簽，直接鏈接到 SVG 文件。
使用語法：<a href="line.svg">查看SVG</a>
三、SVG形狀元素
3.1、線 - line
使用語法：<svg width="300" height="300" > <line x1="0" y1="0" x2="300" y2="300" stroke="black" stroke-width="20"></line> </svg>
使用line標簽創建線條，(x1,y1)是起點，(x2,y2)是終點，stroke繪制黑線，stroke-width是線寬。
3.2、矩形 - rect
//使用語法： <svg width="300" height="300" > <rect width="100" height="100" //大小設置 x="50" y="50" //可選 左上角位置，svg的左上角默認(0,0) rx="20" ry="50" //可選 設置圓角 stroke-width="3" stroke="red" fill="pink" //繪制樣式控制 ></rect> </svg>
上述參數 width、height是必填參數，x、y是可選參數，如不設置的時候，默認為(0,0)，也就是svg的左上角開始繪制。rx、ry是可選參數，不設置是矩形沒有圓角。fill定義填充顏色。
3.3、圓形 - circle
// 使用語法 <svg width="300" height="300" > <circle cx="100" cy="50" // 定義圓心 ，可選 r="40" // 圓的半徑 stroke="black" stroke-width="2" fill="red"/> //繪制黑框填充紅色 </svg>
上述(cx,xy)定義圓心的位置，是可選參數，如果不設置默認圓心是（0,0）。r是必需參數，設置圓的半徑。
3.4、橢圓 - ellipse
橢圓與圓相似，不同之處在於橢圓有不同的x和y半徑，而圓兩個半徑是相同的。
// 使用語法 <svg width="300" height="300" > <ellipse rx="20" ry="100" //設置橢圓的x、y方向的半徑 fill="purple" // 橢圓填充色 cx="150" cy="150" //設置橢圓的圓心 ，可選參數 ></ellipse> </svg>
上述橢圓的兩個rx、ry兩個方向半徑是必須參數，如果rx=ry就表示是圓形，（cx,cy）是橢圓的圓心，是可選參數，如果不設置，則默認圓心為（0,0）。
3.5、折線 - polyline
// 使用語法 <svg width="300" height="300" style="border:solid 1px red;"> <!-- 繪制出一個默認填充黑色的三角形 --> <polyline points=" //點的集合 0 ,0, // 第一個點坐標 100,100, // 第二個點坐標 100,200 // 第三個點坐標 " stroke="green" ></polyline> <!-- 繪制一個台階式的一條折線 --> <polyline points="0,0,50,0,50,50,100,50,100,100,150,100,150,150" stroke="#4b27ff" fill="none" ></polyline> </svg>
上述代碼執行結果如圖所示：
需要注意的是 points 中包含了多個點的坐標，但不是一個數組。
3.6、多邊形 - polygon
polygon 標簽用來創建不少於3個邊的圖形，多邊形是閉合的，即所有線條連接起來。
// 使用語法 <svg width="300" height="300" style="border:solid 1px red;"> <polygon points=" 0,0, //多邊形的第一點 100,100, //多邊形的第二點 0,100 //多邊形的第三點 " stroke="purple" stroke-width="1" fill="none" ></polygon> </svg>
polygon繪制的時候與折線有些類似，但是polygon會自動閉合，折線不會。
3.7、路徑 - path
path 是SVG基本形狀中最強大的一個，不僅能創建其他基本形狀，還能創建更多其他形狀，如貝塞爾曲線、2次曲線等。
點個關注，下篇更精彩！