svg呢，跟canvas其實都是用來畫圖的，只不過svg畫的圖，是矢量圖，矢量圖有個特點是，放大縮小，不會失真，canvas呢，是逐像素進行渲染的。 也就是，他依賴分辨率，會根據分辨率來決定圖形是否清晰，還有，svg他畢竟是dom元素，所以他能觸發事件，canvas一旦圖形被繪制完成，它就不會繼續得到瀏覽器的關注。
首先，使用svg簡單的來畫一條線。
使用line標簽，進行畫線
使用rect標簽畫矩形
所有整個圖形，畫出來的，都帶有填充的，如果我們只是想要矩形的，並不想要填充怎么辦呢？
使用circle標簽畫圓
使用ellipse標簽畫橢圓
使用polygon標簽，連續畫線，折線。
使用polygon標簽，畫多邊形，跟上面畫折線的參數一樣，有區別的是，無論去不去掉填充， 都會閉合圖形， 上面折線的，只要你去掉填充，閉合就會消失。
path標簽的使用：
也是連續畫線，比較靈活使用。
大寫小寫的區別呢， 大寫，是根據畫布的左上角， 也就是畫布的原點，進行定位。 小寫呢，是根據你當前的位置進行定位。 也就是，大寫參考原點，小寫參考自身。
大寫 絕對定位，0，0點。 小寫相對定位， 相對於上個點進行定位。
如果還不懂的話，那么請看下面圖解：
除了 M L 還有 H V Z
如果是小寫呢， 那他還是一樣，根據上個點的位置進行參考。
當然，path 不止可以畫直線，還可以畫弧線。
漸變
模糊
比例尺，說到比例尺，什么東西上面有比例尺？ 地圖就有吧。 1：500 也就是 在地圖里面的 1cm 等於真實的 500m 如此。
svg里面呢，也有這么一個東西，應用於svg標簽。
最后，有幾個屬性，設置在css 上面的：
stroke：black stroke-width： 5px； 設置線的 顏色，以及大小
fill: transparent; 設置填充顏色，transparent是透明
stroke-opacity: 0.5; 設置線透明
fill-opacity: 0.5; 設置填充透明
stroke-linecap: square; round, 設置線結束點的樣式，是圓的，還是方的，都會在線的基礎上，再添加。
stroke-linejoin: bevel; round,miter 設置線與線相交的樣式，斜角，圓角，默認的
troke-dasharray: 10px 20px 30px ......; 定義虛線，第一段虛線為 黑色10px 第二段為 空白 20px 第三段為 黑色30px。。。
stroke-dashoffset: 10px; 把線向左平移