什麼是SVG
- SVG（Scalable Vector Graphics） 為一種可縮放的向量圖形，基於XML，用於描述二維向量圖形的一種格式。
- SVG是www的標準。
- SVG與DOM和XSL之類的W3C標準的一個整體
與其他圖像格式相比，SVG優勢
- SVG可以被非常多的工具讀取與修改。
- SVG相較于JPEG和GIF相比較起來，尺寸更小，且可壓縮性更強。
- SVG可以在圖像質量不下降的情況下被放大。
- SVG可以與 java 技術一起運行。
- SVG是純粹的XML文件。
- SVG圖像中的文本是可選的，同時也是可以搜索的。
關於SVG--PATH
在SVG之中所有的元素都可以有Path組成，所以Path再SVG中非常重要。下面描述中，大寫字母表示絕對坐標，小寫代表與前一個坐標的相對坐標。
在SVG坐標體系中，熒幕的左上角為起點，左到右為 X 軸，從上到下為 y 軸。
Path的形狀主要由一個參數 d 來決定。d所接受的參數是命令加參數的形式，具體命令如下。
SVG坐標系
Path指令列表
M/m （Move to 的意思）
M表示起始點，所有Path都會先有一個起點坐標，因為是 move to 的原因，可以預期如果只給定 M/m
那么你只會得到一個看不到的點。H/h
H可以從目前的點畫出水平綫到X坐標，衹有一個參數。
<svg xmlns="http://www.w3.org/2000/svg">
<path d="M0 0 H50" stroke="black"/>
</svg>
H=50
- V/v
V可以從目前的點畫出垂直綫到 y 的坐標，等同于 H/h 衹有一個參數。
<svg xmlns="http://www.w3.org/2000/svg">
<path d="M0 0 V50" stroke="black"/>
</svg>
V=50
- L/l
L可以從目前點畫到另外給定的一個坐標上，有兩個參數，x、y。
<svg xmlns="http://www.w3.org/2000/svg">
<path d="M0 0 L50 50" stroke="black"/>
</svg>
（0，0）->（50，50）
- C/c
C表示可以畫出一條三次貝茲曲綫（Bézier curve）。因此會有個控制點，分別為 x1，y1，x2，y2，x，y 。在這之中第一組坐標表示第一個曲綫的控制點，第二組表示第二個曲綫控制點，最後表示結束位置。
<svg xmlns="http://www.w3.org/2000/svg">
<path d="M0 0 C40 40,60 40,100,0" stroke="black" fill="none"/>
</svg>
Bézier curve
S/s
S 可以在原本的點後方建立一個帶有貝茲曲線控制點的點，然後原本的點會以同樣的斜率鏡射一個貝茲控制點，講得很像繞口令，可以可以看下圖就明白了。Q / q
Q 就簡單多了，就是起點和終點的貝茲曲線共用同一個控制點，只需要有貝茲控制點的座標和終點座標即可。
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" version="1.1">
<path d="M0 0 Q50 50, 100 0" stroke="black" fill="none"/>
</svg>
Q/q
T / t
T 只有一組參數 x,y ，表示終點的座標，所以 T 的前方要接上 Q 才能畫出對應的座標線。Z / z
Z 沒有任何參數，放在最後，表示將起點和終點用直綫連接起來。
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" version="1.1">
<path d="M0 0 Q50 50, 100 0 Z" stroke="black" fill="none"/>
</svg>
Q/q -> Z
path畫一個正方形
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" version="1.1">
<path d="M0 0 L0 50 L50 50 L50 0" stroke="black"/>
</svg>
path畫正方形
path 畫弧綫（Arcs）
畫出橢圓圓弧（Elliptical Arc）。命令是 A/a，接受的參數共有 7 個。
- rx：橢圓的 x 軸半徑（根據不同的終點換算比例）
- ry：橢圓的 y 軸半徑（根據不同的終點換算比例）
- x-axis-rotation：弧綫與x軸的夾角。
- large-arc-flag ：
- sweep-flag：
- x：終點 x 坐標
- y：終點 y 坐標
參考資料
MDN-SVG教程
Oxxo,STUDIO->SVG Path上
Oxxo,STUDIO->SVG Path下
svg-online編輯
