什麼是SVG？
- SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
- SVG 用於定義用於網絡的基於矢量的圖形
- SVG 使用 XML 格式定義圖形
- SVG 圖像在放大或改變尺寸的情況下其圖形質量不會有損失
- SVG 是萬維網聯盟的標準
SVG 的優勢
與其他圖像格式相比（比如 JPEG 和 GIF），使用 SVG 的優勢在於：
- SVG 圖像可通過文本編輯器來創建和修改
- SVG 圖像可被搜索、索引、腳本化或壓縮
- SVG 是可伸縮的
- SVG 圖像可在任何的分辨率下被高質量地打印
- SVG 可在圖像質量不下降的情況下被放大
——以上摘自W3C
<path>標籤
<path>是一個模擬畫圖動作的svg標籤，擁有很強的表達能力，主要藉助其基於計算的矢量性質。d屬性：
是一個字符串，字符串編碼了path的畫法，可以看成若干命令組成，命令可以帶參數（一般是帶座標參數）。解析字符串是在看到命令時結束上一個命令並分段。形式類似：
"M 100 100 L 300 100 L 200 300 z"
出現了三個命令：M,L,z。其中M，L命令是帶座標參數的。z不帶。
M :- moveto 將繪畫點重置到指定點上
L :- lineto 從當前的點畫一條直線到目標點上，同時當前點更新
z :- last,closepath 從當前點連回最早的點，以line的形式
fill屬性：
圖形如果閉合的話在圖形裏面顯示特定顏色。
stroke屬性:邊的顏色
stroke-width屬性：邊寬
示例：
<path d="M 100 100 L 300 100 L 200 300 z"
fill="red" stroke="blue" stroke-width="3" />
通常一個命令的大寫版本表示絕對定位，小寫版本表示相對定位。即使其實並不存在區別，命令也會有大小寫版本，如Zz.
M m:moveto
Z z:closepath
L l:lintto
H h:horizontal lineto :這個只有一個可以看成y值不變的L l
V v:verical lineto:類似H h，x值不變
C c:curveto 給定三個座標，以前兩個爲控制點，作從當前點到第三個點的貝塞爾曲線，並且更新當前點
S s:shorthand/smooth curveto 上面的簡化版本，省略第一個座標的給出，第一個座標被自動設定爲當前點與上一個貝塞爾曲線命令第二個座標的的相對點。所以你可以連續用S繪製。
Q q:quadratic Bezier curveto 就是隻有一個控制點的貝塞爾曲線
T t:Shorthand/smooth quadratic Bezier curveto省略一個控制點的一個控制點的貝塞爾曲線，那個點被取成上一個一個控制點的貝塞爾曲線與當面點的相對點。
A a:ellipical arc 這個東西比較蛋疼，一共六個參數，原x半徑，原y半徑，橢圓自x軸旋轉角度（這個旋轉貌似是順時針轉的，可能是因爲y軸是反着取的），大弧flag，sweep_flag,目標點x,y。其中前三個參數是爲了確定一個橢圓，現在可以把一個橢圓嵌到當前點和目標點中，我們畫的就是兩點之間的弧。然而事實上可以嵌入對稱的兩個橢圓，而且弧也有取大取小兩種取法，這就使用兩個flag（0,1編碼）確定到底取四個弧中的哪一個。大小弧flag容易理解（1取大的），sweep flag大致說是若取1則取“正角度”那邊的（那邊不是同一個橢圓，而是一個橢圓的大邊以及另一個橢圓的小邊作爲一邊，這個看圖就清楚），稍微考慮一下就知道的確一邊旋轉方向是一致的，另一邊相反，不管y軸有沒有看成倒置。不過奇葩的是貌似正反是按照看到的方向來算的而不是倒置的方向。總之屏幕或者矩陣這種y倒置的副作用真的挺蛋疼