SVG可縮放矢量圖形（Scalable Vector Graphics）這項技術，現在越來越讓大家熟知，在h5的移動端應用使用也越來越廣泛了， 下面讓我分享給大家svg學習的經驗。
HTML體系中，最常用的繪制矢量圖的技術是SVG和HTML5新增加的canvas元素。這兩種技術都支持繪制矢量圖和光柵圖。
一、什么是svg？
Graphics）是基於可擴展標記語言（XML），用於描述二維矢量圖形的一種圖形格式。SVG是W3C在2000年8月制定的一種新的二維矢量圖形格式，也是規范中的網絡矢量圖形標准。SVG嚴格遵從XML語法，並用文本格式的描述性語言來描述圖像內容，因此是一種和圖像分辨率無關的矢量圖形格式。
特征：
SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
SVG 用來定義用於網絡的基於矢量的圖形
SVG 使用 XML 格式定義圖形
SVG 圖像在放大或改變尺寸的情況下其圖形質量不會有所損失
SVG 是萬維網聯盟的標准
SVG 與諸如 DOM 和 XSL 之類的 W3C 標准是一個整體
與其他圖像格式相比，使用 SVG 的優勢在於：
SVG 可被非常多的工具讀取和修改（比如記事本）
SVG 與 JPEG 和 GIF 圖像比起來，尺寸更小，且可壓縮性更強。
SVG 是可伸縮的
SVG 圖像可在任何的分辨率下被高質量地打印
SVG 可在圖像質量不下降的情況下被放大
SVG 圖像中的文本是可選的，同時也是可搜索的（很適合制作地圖）
SVG 可以與 Java 技術一起運行
SVG 是開放的標准
SVG 文件是純粹的 XML
在兼容方面，chrome、foxfire、ie9及以上瀏覽器支持，但是SVG SMIL動畫 IE瀏覽器(包括IE11)整體不支持（但對於移動端來說呢，基本支持）。
注意：SVG是以XML定義的，所以是大小寫敏感的，這點與HTML不一樣。
二、SVG的呈現方式
對於直接支持SVG的瀏覽器，SVG主要采用兩面兩種呈現的方式。
內聯到HTML
SVG是標准的HTML元素，直接寫到HTML中就可以了，看下面的例子：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html>
<head>
<!-- <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> -->
<title> My First SVG Page</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
width="200px" height="200px">
<rect x="0" y="0" width="100%" height="100%"
fill="none" stroke="black"/>
<circle cx="100" cy="100" r="50"
style="stroke: black; fill: red;"/>
</svg>
</body>
</html>
請注意開頭的部分xml聲明，與svg的命名空間xmlns、版本version等部分，主要是考慮兼容性的問題；這些部分在HTML5中基本都可以不用寫了(寫不寫還是自己瞧着辦吧)。
獨立SVG文件
獨立SVG指的是通過使用svg文件擴展名來提供向量圖形文件格式。在瀏覽器中嵌入這個svg文件就可以使用了。
1.獨立的SVG文件/頁面，定義的模板基本就像下面的一樣：
<svg width="100%" height="100%"> <!-- SVG markup here. --> <circle cx="100" cy="100" r="50" style="stroke: black; fill: red;"/> </svg>
把這樣的文本文件保存成以svg為擴展名的文件，例如sun.svg，這樣的文件可以直接用瀏覽器打開瀏覽，也可以作為引用嵌入到別的頁面中。
2.HTML引用外部的SVG文件，可以使用<embed> <object> <iframe> 引入
語法：<embed>
<embed src="rect.svg" width="300" height="100" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" />
語法：<object>
<object data="rect.svg" width="300" height="100" type="image/svg+xml" codebase="http://www.adobe.com/svg/viewer/install/" />
語法：<iframe>
<iframe src="rect.svg" width="300" height="100"> </iframe>
三、SVG的渲染順序
SVG是嚴格按照定義元素的順序來渲染的，這個與HTML靠z-index值來控制分層不一樣。在SVG中，寫在前面的元素先被渲染，寫在后面的元素后被渲染。后渲染的元素會覆蓋前面的元素，雖然有時候受透明度影響，看起來不是被覆蓋的，但是SVG確實是嚴格按照先后順序來渲染的。
四、SVG的文檔結構
SVG文檔的元素基本可以分為以下幾類：
- 圖形元素：circle, ellipse, line, path, polygon, polyline, rect；
- 解釋元素：desc, metadata, title；
- 結構元素：defs, g, svg, symbol, use；
- 漸變元素：linearGradient, radialGradient；
- 動畫元素：animate, animateColor, animateMotion, animateTransform, set；
- 其他元素：a,altGlyphDef,clipPath,color-profile,cursor,filter,font,font-face,foreignObject,image,marker,mask,pattern,script,style,switch,text,view等。
視窗 - svg元素
可以在svg元素中以任何順序放置任何的其他元素，包括嵌套svg元素。
svg元素支持的屬性常用的也就是id,class,x,y,width,height,viewBox,preserveAspectRatio,以及fill和stroke的相關屬性。
svg元素支持的事件也是常用的onload, onmouseover, onmousemove, onmousedown, onmouseup, onclick, onfocusin, onfocusout, onresize, onscroll, onunload等。svg元素就不多說了，完整的屬性和事件列表參看后面的官方文檔。
圖形元素：
SVG 有一些預定義的形狀元素，可被開發者使用和操作：
- 矩形 <rect>
- 圓形 <circle>
- 橢圓 <ellipse>
- 線 <line>
- 折線 <polyline>
- 多邊形 <polygon>
- 路徑 <path>
具體的我說一下path的用法，其他的都比較好理解：
路徑 - path元素
這個是最通用，最強力的元素了；使用這個元素你可以實現任何其他的圖形，不僅包括上面這些基本形狀，也可以實現像貝塞爾曲線那樣的復雜形狀；此外，使用path可以實現平滑的過渡線段，雖然也可以使用polyline來實現這種效果，但是需要提供的點很多，而且放大了效果也不好。這個元素控制位置和形狀的只有一個參數：
d：一系列繪制指令和繪制參數(點)組合成。
繪制指令分為絕對坐標指令和相對坐標指令兩種，這兩種指令使用的字母是一樣的，就是大小寫不一樣，絕對指令使用大寫字母，坐標也是絕對坐標；相對指令使用對應的小寫字母，點的坐標表示的都是偏移量。
絕對坐標繪制指令
這組指令的參數代表的是絕對坐標。假設當前畫筆所在的位置為(x0,y0)，則下面的絕對坐標指令代表的含義如下所示：
| 指令 |
參數 |
說明 |
| M |
x y |
將畫筆移動到點(x,y) |
| L |
x y |
畫筆從當前的點繪制線段到點(x,y) |
| H |
x |
畫筆從當前的點繪制水平線段到點(x,y0) |
| V |
y |
畫筆從當前的點繪制豎直線段到點(x0,y) |
| A |
rx ry x-axis-rotation large-arc-flag sweep-flag x y |
畫筆從當前的點繪制一段圓弧到點(x,y) |
| C |
x1 y1, x2 y2, x y |
畫筆從當前的點繪制一段三次貝塞爾曲線到點(x,y) |
| S |
x2 y2, x y |
特殊版本的三次貝塞爾曲線(省略第一個控制點) |
| Q |
x1 y1, x y |
繪制二次貝塞爾曲線到點(x,y) |
| T |
x y |
特殊版本的二次貝塞爾曲線(省略控制點) |
| Z |
無參數 |
繪制閉合圖形，如果d屬性不指定Z命令，則繪制線段，而不是封閉圖形。
|
移動畫筆指令M，畫直線指令：L，H，V，閉合指令Z都比較簡單。例子：
<svg width="200" height="150"> <path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black" stroke-linecap="round" stroke-dasharray="5,10,5" fill="none"/> <path d="M 10 75 L 190 75" stroke="red" stroke-linecap="round" stroke-width="1" stroke-dasharray="20" fill="none"/> </svg>
解釋性元素 - desc元素與title元素（此元素主要是做輔助，不會顯示）
每個容器元素(可以包含其他容器元素或者圖形元素的元素，例如：a,defs,glyph,g,marker,mask,missing-glyph,pattern,svg,switch和symbol)和圖形元素都可以包含desc和title元素，這兩個元素都是輔助性的元素，用於解釋相關情境；它們的內容都是文本。當SVG文檔被渲染的時候，這2個元素不會被渲染到圖形中。這個2個元素之間差別不是太大，title在有些實現中是作為提示信息出現的，所以通常title是放到父元素的第一個位置上。
結構元素
組合 - g元素
g元素是一種容器，它組合一組相關的圖形元素成為一個整體；這樣，我們就可以對這個整體進行操作。這個元素通常可以和desc和title元素配合使用，提供文檔的結構信息。結構良好的文檔通常可讀性和渲染效率都不錯。看一個小例子：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="5cm" height="5cm"> <desc>Two groups, each of two rectangles</desc> <g id="group1" fill="red"> <rect x="1cm" y="1cm" width="1cm" height="1cm"/> <rect x="3cm" y="1cm" width="1cm" height="1cm"/> </g> <g id="group2" fill="blue"> <rect x="1cm" y="3cm" width="1cm" height="1cm"/> <rect x="3cm" y="3cm" width="1cm" height="1cm"/> </g> <!-- Show outline of canvas using 'rect' element --> <rect x=".01cm" y=".01cm" width="4.98cm" height="4.98cm" fill="none" stroke="blue" stroke-width=".02cm"/> </svg>
注意幾點：
1. xmlns="http://www.w3.org/2000/svg"表明了整個svg元素默認的命名空間是svg。這個在無歧義的時候可以省略。這里由於svg文檔是一個XML文檔，XML命名空間的相關規則這里都是適用的。例如可以給svg顯示的指定命名空間，給命名空間提供別名等。
2. g元素是可以嵌套的。
3. 組合起來的圖形元素就和單個的元素一樣，可以給id值，這樣，需要的時候(例如動畫和重用一組元素)只用引用這個id值就可以了。
4. 組合一組圖形元素可以統一設置這組元素的相關屬性(fill,stroke,transform等)，這也是使用組合的一種場景。
模板 - symbol元素
symbol元素用於定義圖形模板(模板可以包含很多圖形)，這個模板可以被use元素實例化。模板的功能與g元素很相似，都是提供一組圖形對象，但是也有一些區別。與g元素不同的地方是：
1.symbol元素本身是不會被渲染的，只有symbol模板的實例會被渲染。
2.symbol元素可以擁有屬性viewBox和preserveAspectRatio，這些允許symbol縮放圖形元素。
從渲染角度來說，與symbol元素相似的元素是marker(定義箭頭和標號)和pattern(定義顏色)元素；這些元素不會直接被渲染；他們的使用方式基本都是由use元素去實例化。正是這個原因，對於symbol來說，'display'屬性是沒有意義的。
下面這個修改過的代碼顯示了symbol的使用方式：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="5cm" height="5cm"> <desc>Two groups, each of two rectangles</desc> <symbol id="group1" fill="red"> <rect x="1cm" y="1cm" width="1cm" height="1cm"/> <rect x="3cm" y="1cm" width="1cm" height="1cm"/> </symbol> <g id="group2" fill="blue"> <rect x="1cm" y="3cm" width="1cm" height="1cm"/> <rect x="3cm" y="3cm" width="1cm" height="1cm"/> </g> <use xlink:href="#group1" target="_blank" rel="nofollow"> <!-- Show outline of canvas using 'rect' element --> <rect x=".02cm" y=".02cm" width="4.96cm" height="4.96cm" fill="none" stroke="blue" stroke-width=".02cm"/> </svg>
定義 - defs元素
SVG允許定義一組對象，然后重用這組對象(注意，不僅僅是圖形對象)。最常見的例子如定義漸變色，然后再其他的圖形對象中賦給fill屬性。漸變色定義的時候是不會渲染的，所以這類型的對象可以放到任何地方。重用對於圖形對象中也是經常存在的，而且我們也不希望定義的時候直接渲染，而是想在引用的地方渲染，這個可以用defs元素實現。
通常情況下，推薦的做法是：只要有可能，就把被引用的對象放到defs元素中。這些對象通常是：altGlyphDef,clipPath,cursor,filter, marker,mask,pattern,linearGradient,radialGradient，symbol和圖形對象等。把這些對象定義在defs元素中很容易理解，所以就提高了可訪問性。
其實作為容器對象的g元素、symbol元素、defs元素都不同程度上提供了重用的作用，只不過每個元素的特性可能少許不同：比如g元素是直接渲染的，symbol和defs不會直接渲染，symbol含有viewBox屬性，會創建新的視窗。
通常都會給在defs中定義的元素賦予id屬性，並在用到的地方直接使用。根據元素的不同，這些定義可以用到不同地方，比如下面的漸進色作為屬性來使用了：
<svg width="8cm" height="3cm" xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>Local URI references within ancestor's 'defs' element.</desc> <defs> <linearGradient id="Gradient01"> <stop offset="20%" stop-color="#39F" /> <stop offset="90%" stop-color="#F3F" /> </linearGradient> </defs> <rect x="1cm" y="1cm" width="6cm" height="1cm" fill="url(#Gradient01)" /> </svg>
圖形相關元素的定義可以用use元素鏈接到文檔。例如：
<svg width="10cm" height="3cm" viewBox="0 0 100 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <desc>Example Use01 - Simple case of 'use' on a 'rect'</desc> <defs> <rect id="MyRect" width="60" height="10"/> </defs> <rect x=".1" y=".1" width="99.8" height="29.8" fill="none" stroke="blue" stroke-width=".2" /> <use x="20" y="10" xlink:href="#MyRect" /> </svg>
在這里請注意xlink名稱空間的使用。盡管大多數查看器沒有它也將正確顯示這一項，但為了保持一致，xlink名稱空間應該在<svg></svg>元素上定義。
動畫元素
SVG提供了下列動畫元素：
1. animate元素
這個是最基本的動畫元素，可以直接為相關屬性提供不同時間點的值。
2. set元素
這個是animate元素的簡寫形式，支持所有的屬性類型，尤其是當對非數字型的屬性(例如visibility)進行動畫時很方便。set元素是非增量的，相關的屬性對之無效。 to指定的動畫結束值類型一定要符合屬性的取值類型。
3. animateMotion元素
路勁動畫元素。這個元素大多數屬性都和上面一樣，只有下面幾個稍微有點區別：
calcMode = "discrete | linear | paced | spline"
這個屬性的默認值不同，在該元素中默認的是paced。
path = "<path-data>"
動畫元素移動的路徑，格式與path元素的d屬性的值的格式是一致的。
keyPoints = "<list-of-numbers>"
這個屬性的值是一系列分號給開的浮點數值，每個值的取值范圍是0~1。這些值代表了keyTimes屬性指定的對應時間點移動的距離，這里距離具體是多少是由瀏覽器自己決定的。
rotate = <number> | auto | auto-reverse"
這個屬性指定了元素移動時旋轉的角度。默認值是0，數字代表旋轉的角度，auto表示隨着路勁的方向轉動物體。auto-reverse表示轉向與移動方向相反的方向。
此外animateMotion元素的from,by,to,values的值都是坐標對組成的；x值與y值之間用逗號或空格分開，每個坐標對之間用分號隔開比如from="33,15"表示起點x坐標為33，y坐標為15。
指定運動路徑的方式有兩種：一種為直接給path屬性賦值，一種為使用mpath元素作為animateMotionde的子元素指定路徑。如果同時使用這兩種方式，則使用mpath元素優先級高。這兩種方式優先級都比values,from,by,to高。
看一個小例子：
<?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="5cm" height="3cm" viewBox="0 0 500 300" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" > <rect x="1" y="1" width="498" height="298" fill="none" stroke="blue" stroke-width="2" /> <path id="path1" d="M100,250 C 100,50 400,50 400,250" fill="none" stroke="blue" stroke-width="7.06" /> <circle cx="100" cy="250" r="17.64" fill="blue" /> <circle cx="250" cy="100" r="17.64" fill="blue" /> <circle cx="400" cy="250" r="17.64" fill="blue" /> <path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z" fill="yellow" stroke="red" stroke-width="7.06" > <animateMotion dur="6s" repeatCount="indefinite" rotate="auto" > <mpath xlink:href="#path1"/> </animateMotion> </path> </svg>
4. animateColor元素
顏色動畫元素。這是一個過時的元素，基本上所有功能都可以用animate代替，所以還是不要用了。
5. animateTransform元素
變換動畫元素。看看特殊的一些屬性：
type = "translate | scale | rotate | skewX | skewY"
這個屬性指定了變換的類型，translate是默認值。
from,by和to的值相應的都是對應變換的參數，這個還是與前面講的變換是一致的。values則是一組分號隔開的這樣的值系列。
支持動畫效果的元素和屬性
基本上所有圖形元素(path,rect,ellipse,text,image...)，容器元素(svg, g, defs, use, switch, clipPath, mask...)都支持動畫。基本上大多數的屬性都支持動畫效果。詳細的說明請參看官方文檔。
五、理解SVG的viewport，viewBox，preserveAspectRatio
viewport
表示SVG可見區域的大小，或者可以想象成舞台大小，畫布大小。
<svg width="500" height="300"></svg>
上面的SVG代碼定義了一個視區，寬500單位，高300單位。
注意：
上面的SVG代碼定義了一個視區，寬500單位，高300單位。
不帶單位的情況 ：不帶單位的值被認為帶的是"用戶單位"，就是當前用戶坐標系的單位值。
帶單位的情況
svg中相關單位與CSS中是一樣的：em,ex,px,pt,pc,cm,mm和in。長度還可以使用"%"。
相對度量單位：em和ex也與CSS中一樣，是相對於當前字體的font-size和x-height來說的。
絕對度量單位：一個px是等於一個"用戶單位"的，也就是"5px"與"5"是一樣的。但是一個px是不是對應一個像素，那就看有沒有進行過一些變換了。
其他的幾個單位基本都是px的倍數：1pt=1.25px,1pc=15px,1mm=3.543307px,1cm=35.43307px,1in=90px。
如果最外層的SVG元素的width和height沒有指定單位(也就是"用戶單位")，則這些值會被認為單位是px。
viewBox視窗變換
viewBox屬性值的格式為(x0,y0,u_width,u_height)，每個值之間用逗號或者空格隔開(已經繪制圖形的坐標一樣)，它們共同確定了視窗顯示的區域：視窗左上角坐標設為(x0,y0)、視窗的寬設為u_width，高為u_height；這個變換對整個視窗都起作用。
這里一定不要混淆：視窗的大小和位置已經由創建視窗的元素和外圍的元素共同確定了(例如最外層的svg元素建立的視窗由CSS，width和height確定)，這里的viewBox其實是設置這個確定的區域能顯示視窗坐標系的哪個部分。
viewBox的設置其實是包含了視窗空間的縮放和平移兩種變換。
變換的計算也很簡單：以最外層的svg元素的視窗為例，假設svg的寬與長設置為width,height，viewBox的設置為(x0,y0,u_width,u_height)。則繪制的圖形，寬和高的縮放比例分別為：width/u_width, height/u_height。視窗的左上角的坐標設置為了(x0,y0)。
在日常工作中，我們經常需要完成的一個任務就是縮放一組圖形，讓它適應它的父容器。我們可以通過設置viewBox屬性達到這個目的。
能建立新視窗的元素
任何時候，我們都可以嵌套視窗。創建新的視窗的時候，也會創建新的視窗坐標系和用戶坐標系，當然也包括裁減路徑也會創建新的。下列是能建立新視窗的元素列表：
svg：svg支持嵌套。
symbol：當被use元素實例化的時候創建新的視窗。
image：引用svg元素時會創建新視窗。
foreignObject：創建新視窗去渲染里面的對象。
preserveAspectRatio-保持縮放的比例 屬性
有些時候，特別是當使用viewBox的時候，我們期望圖形占據整個視窗，而不是兩個方向上按相同的比例縮放。而有些時候，我們卻是希望圖形兩個方向是按照固定的比例縮放的。使用屬性preserveAspectRatio就可以達到控制這個的目的。
這個屬性是所有能建立一個新視窗的元素，再加上image,marker,pattern,view元素都有的。而且preserveAspectRatio屬性只有在該元素設置了viewBox以后才會起作用。如果沒有設置viewBox，則preserveAspectRatio屬性會被忽略。
屬性的語法如下：preserveAspectRatio="[defer] <align> [<meetOrSlice>]"
注意3個參數之間需要使用空格隔開。
defer:可選參數，只對image元素有效，如果image元素中preserveAspectRatio屬性的值以"defer"開頭，則意味着image元素使用引用圖片的縮放比例，如果被引用的圖片沒有縮放比例，則忽略"defer"。所有其他的元素都忽略這個字符串。
align:該參數決定了統一縮放的對齊方式，可以取下列值：
none - 不強制統一縮放，這樣圖形能完整填充整個viewport。
xMinYMin - 強制統一縮放，並且把viewBox中設置的<min-x>和<min-y>對齊到viewport的最小X值和Y值處。
xMidYMin - 強制統一縮放，並且把vivewBox中X方向上的中點對齊到viewport的X方向中點處，簡言之就是X方向中點對齊，Y方向與上面相同。
xMaxYMin - 強制統一縮放，並且把viewBox中設置的<min-x> + <width>對齊到viewport的X值最大處。
類似的還有其他類型的值：xMinYMid,xMidYMid,xMaxYMid,xMinYMax,xMidYMax,xMaxYMax。這些組合的含義與上面的幾種情況類似。
meetOrSlice：可選參數，可以去下列值：
meet - 默認值，統一縮放圖形，讓圖形全部顯示在viewport中。
slice - 統一縮放圖形，讓圖形充滿viewport，超出的部分被剪裁掉。
六、SVG圖形在移動端的自適應方法
在上面我們了解了viewBox視窗變換之后，其實可以得出一個公式：
width為svg的里面設置的寬度
height為svg里面設置的高度
uwidth為svg里面設置的寬度
uheight為svg里面設置的高度
cw為圖形設置的高度
ch為圖形設置的寬度
sW為實際寬度
sH為實際高度
實際寬度：sW = (width/uwidth)*cw
實際高度：sH = (height/uheight)*ch
例子：
<svg width="200" height="200" viewBox="0 0 100 100"> <rect x="0" y="0" width="200" height="200" fill="Red" /> </svg>
根據公式：
sW = (200/100)*200 = 400px
sH = (200/100)*200 = 400px
場景需求：通常來說我們的我移動端大部分視覺稿來說是640*960的（以這個為主呢，不說1080、720了），這里黑色不規則區域高度為200px，寬度為640px（640下面）
根據上面的公司，其實我們的svg里面的圖形元素可以按實際640的大小寫，viewbox的大小值也可以按，640的大小寫，我們只需要控制svg容器上面的width、height大小的值變化，就可以達到適應的效果，看看代碼：
<svg class="svg_pro" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0,0,640,200"> <polygon points="0,0 253,0 200,200 0,200" style="fill:rgba(0,0,0,.8);"></polygon> <polygon points="256,0 640,0 640,200 203,200" style="fill:rgba(0,0,0,.8);"></polygon> </svg>
svg基本上所有的屬性(對於所有元素，不僅是文本)都可以用CSS與一個元素關聯，並且所有CSS屬性都在SVG圖像中可用，那么我們在樣式里面加上如下樣式，就可以達到只適應：
svg.svg_pro { position: absolute; width: 100%; //這里寬度的值隨着屏幕變化 height: 100%; //高度值隨着屏幕變化（圖片縮放，改變容器高度） top: 0; }
然並卵，這樣就可以達到效果了，待續………………
參考資料：
突襲HTML5之SVG 2D入門（svg教程寫的很全，推薦指數5星）
SVG 教程（w3school的svg教程，也不錯）
mozilla svg教程（推薦給喜歡看英文教程的朋友）
知乎上面對svg的一些討論（大家在使用時，有必要可以看一下）
推薦svg庫：