一.引言
SVG全稱爲“Scalable Vector Graphics”，意爲可縮放矢量圖形。而什麼是矢量圖？矢量就是向量，所以矢量圖就意味着無限縮放而不改變圖片的質量。
多說無益，下面放MDN上關於SVG的定義：
SVG是XML語言的一種形式，有點類似XHTML，它可以用來繪製矢量圖形，例如右面展示的圖形。SVG可以通過定義必要的線和形狀來創建一個圖形，也可以修改已有的位圖，或者將這兩種方式結合起來創建圖形。圖形和其組成部分可以變形，可以合成，還可以通過濾鏡完全改變外觀。
SO~你可以像創建html dom元素一樣，用類似的標籤來愉快的創建各種矢量圖形。當然，SVG有一套自己的規範。老規矩，關門放MDN：
HTML提供了定義標題、段落、表格等等內容的元素。與此類似，SVG也提供了一些元素，用於定義圓形、矩形、簡單或複雜的曲線，以及其他形狀。一個簡單的SVG文檔由根元素和基本的形狀元素構成。另外還有一個g元素，它用來把若干個基本形狀編成一個組。從這些開始，SVG可以成爲任何複雜的組合圖形。SVG支持漸變、旋轉、濾鏡效果、JavaScript接口等等功能，但是所有這些額外的語言特性，都需要在一個定義好的圖形區域內實現。
二.簡單圖形的創建
- 線(line)
<svg width="100" height="100">
<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg> 結果：
上訴標籤<line />就是SVG專門用來創建線的元素。其中X1與y1代表第一個座標在X軸和Y軸中的位置，X2，Y2以此類推。
而最終出現的圖形就是這兩個點連起來形成的閉合路徑。
2.折線(polyline)
<svg width="200" height="200">
<polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" />
</svg> 結果：
上述標籤<polyline/>就是SVG專門用來創建折線的元素。關於points的詳細解釋請看下面的多邊形(polygon)。
3.矩形(rect)
<svg width="200" height="100">
<rect width="200"height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
</svg> 結果：
<rect />就是SVG專門用來創建矩形的元素。且無需設定座標。
4.圓形(circle)
<svg width="200" height="100">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg> 結果：
<circle />就是SVG專門用來創建圓形的元素。cx和cy表示圓心的座標，r表示圓的半徑。
5.橢圓(ellipse)
<svg width="200" height="100">
<ellipse cx="100" cy="50" rx="90" ry="40" style="fill:yellow" />
</svg> 結果：
<ellipse />就是SVG專門用來創建橢圓形的元素。cx和cy表示圓心的座標，rx表示圓心到橢圓左右兩側的半徑，ry表示圓心到橢圓上下兩側的半徑。
6.多邊形(polygon)
6.1 三角形
<svg width="200" height="100">
<polygon points="100,0 40,80 160,80" style="fill:gray" />
</svg> 結果：
<polygon />在用來創建多邊形時，關鍵的屬性就在於points。以上面那個例子來說，“100,0”爲一個座標，分別表示這個點在x軸和y軸的位置。座標點與座標點之間以空格分開。最終的圖形就是這幾個點連起來成的閉合路徑形成的圖案。
6.2 矩形
<svg width="500" height="500">
<polygon points="10,10 170,10 170,80 10,80" style="fill:gray" />
</svg> 結果：
由此可見，<polygon />也可以用來創建矩形。
6.3 六邊形
<svg width="500" height="500">
<polygon points="0,40 30,0 100,0 130,40 100,80 30,80" style="fill:gray" />
</svg> 結果：
從這個points裏的座標點可以看出，svg渲染points裏的點是從左往右渲染的，也就是說你在寫座標點時也要按照這個順序來。
6.4 星形
<svg width="200" height="200">
<polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:gray;"/>
</svg> 結果：
這個星形就是同通過按順序描點連線後生成的圖形，描點順序大概如下：
所以只要捋清楚你要畫的圖形的描點順序和大概座標，就可以畫出很多複雜的圖形。
三.複雜圖形的創建
複雜圖形的創建，要用到<path />這個元素。
MDN對path的解釋爲:
path元素是用來定義形狀的通用元素。所有的基本形狀都可以用path元素來創建。
當然，<path />裏也提供了一個重要的屬性來繪製圖形，那就是d。MDN上對 path d屬性的描述如下：
The d attribute provides a path definition to be drawn.
A path definition is a list of path commands where each command is made of a letter and some numbers representing the parameter of the command. All possible commands are detailed below.
大概意思就是：
d屬性提供了要繪製的路徑定義。
路徑定義是路徑命令的列表，其中每個命令都由一個字母組成，一些數字表示命令的參數。所有可能的命令如下所示。M = moveto L = lineto H = horizontal lineto V = vertical lineto C = curveto S = smooth curveto Q = quadratic Bézier curve T = smooth quadratic Bézier curveto A = elliptical Arc Z = closepath
需要注意的一點是，以上所有命令都可以才用大小寫，大寫代表絕對定位，小寫代表相對定位(比如相對上一個節點移動10px)
下面我們就講講這些命令的含義：
M ：【繪製作圖開始點】
L ：【繪製作圖結束點】
H ：【繪製平行線】
V ：【繪製垂直線】
C ：【三次貝塞爾曲線】
S ：【簡寫三次貝塞爾曲線】
Q ：【二次貝塞爾曲線】
T ：【簡寫二次貝塞爾曲線】
A ：【繪製橢圓弧】
Z ：【閉合路徑】
下面根據順序舉例：
1. M 10 10表示需要移動到的點的x軸和y軸的座標。
2. L 10 20表示在當前位置和新位置（L前面畫筆所在的點）之間畫一條線段。
3. H 30表示繪製一段30的水平線。
4. V 20表示繪製一段20的垂直線。5.三次貝塞爾曲線C：
C x1 y1, x2 y2, x y
(x,y)表示的是曲線的終點，(x1,y1)是起點的控制點，(x2,y2)是終點的控制點。
控制點描述的是曲線起始點的斜率。
<svg width="200" height="100">
<path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>
</svg>如下圖：
什麼意思呢？從M聲明的(10,10)到C的最後一個座標(50,10)。而這條曲線曲折的程度這取決於兩個控制點的斜率。起點的斜率是M(10,10)與C(20,20)連成的起點的直線的斜率。這條直線就是起點沿起點控制點的切線。終點的斜率以此類推。
6.簡寫三次貝塞爾曲線S
S x2 y2, x y
如果S命令跟在一個C命令或者另一個S命令的後面，它的第一個控制點，就會被假設成前一個控制點的對稱點。如果S命令單獨使用，前面沒有C命令或者另一個S命令，那麼它的兩個控制點就會被假設爲同一個點。
<svg width="190px" height="160px" >
<path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>
</svg>如下圖：
也就是說，當你需要對稱的曲線時，你可以使用S指令。
7.二次貝塞爾曲線Q
Q x1 y1, x y
二次貝塞爾曲線Q，只需要一個控制點和一個終點座標。
<svg width="190px" height="160px">
<path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/>
</svg>如下圖：
8.簡寫二次貝塞爾曲線T
T x y
T只需要一個控制點就可以繪製出與上一條曲線對稱的曲線。
<svg width="190px" height="160px">
<path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/>
</svg>如下圖：
需要注意的是，在使用T命令時要確保它的前面是一個Q命令或者T命令。如果單獨使用了T命令，會繪製出一條直線，因爲控制點和終點會被認爲是一個點。
9.弧形A
A rx ry x-axis-rotation large-arc-flag sweep-flag x y
以下是各參數的含義(可對照橢圓<ellipse />的參數含義)：
rx ry ：橢圓的兩個半軸的長度。
x-axis-rotation ： 橢圓相對於座標系的旋轉角度，角度數而非弧度數。
large-arc-flag ： 標記繪製大弧(1)還是小弧(0)部分。
sweep-flag ： 標記向順時針(1)還是逆時針(0)方向繪製。
x y ： 圓弧終點的座標。
<svg width="320px" height="320px">
<path d="M10 315 L110 215 A30 50 0 0 1 162.55 162.45 L172.55 152.45 A30 50 -45 0 1 215.1 109.9 L315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
</svg>如下圖：
10.閉合路徑Z
這個就不用過多解釋了。在某些情況下使用Z命令可以省下寫L命令來閉合路徑。
SVG基本圖形的創建大概就這些，下一節我們聊聊SVG的動畫模塊，以及SVG動畫的內存回收。