SVG 有一個超強的路徑設定功能 path , 可以用最少的字串，描述出任何的線段，這個設計肯定是工程師大腦做出來的，這個功能也是 SVG 最精華的部份，指令說明如下：
指令大寫表示絕對座標，小寫表示相對座標
M x,y - 移動點位到 x,y
L x,y - 線段到 x,y
H x - 橫線到 x
V y - 垂直線到 y
C x1,y1,x2,y2,x,y - 貝滋曲線 x1,y1 和 x2,y2 為控制點，終點在 x,y
S x2,y2,x,y - 貝滋曲線 x1,y1 為前一個曲線的映射點，新增控制點 x2,y2，終點在 x,y
Q x12,y12,x,y - 貝滋曲線 x12=x1=x2 , y12=y1=y2 兩個控制點在同一點，終點在 x,y
T x,y - 貝滋曲線，前面必須是 Q , 控制點為 Q 的映射點，終點在 x,y
Z - 連回線段的起點
A rx,ry,d,f1,f2,x,y - 圓弧
rx,ry : 橢圓長和寬的半徑, 如果長度小於和終點 x,y 的長度，則 rx,ry 會修正為和終點的距離
d : 橢圓旋轉角度 (順時針)
f1 : 0=小角度弧線, 1=大角度弧線
f2 : 0=逆時針方向, 1=順時針方向
x,y : 終點
範例 :
<svg style="width:120px;height:120px;border:1px solid black">
<g style="stroke:#0000ff;fill:none">
<path d="M10,50 L50,10 H100 V50 C100,100,20,100,50,50 Z"></path>
</g>
<g style="stroke:#ff0000;fill:none">
<circle cx="100" cy="100" r="3"></circle>
<circle cx="20" cy="100" r="3"></circle>
<line x1="100" y1="50" x2="100" y2="100"></line>
<line x1="20" y1="100" x2="50" y2="50"></line>
</g>
</svg>
<svg style="width:140px;height:120px;border:1px solid black">
<g style="stroke:#0000ff;fill:none">
<path d="M10,50 C20,10,40,10,50,50 S120,100,100,50"></path>
</g>
<g style="stroke:#ff0000;fill:none">
<circle cx="20" cy="10" r="3"></circle>
<circle cx="40" cy="10" r="3" fill="#0f0"></circle>
<circle cx="60" cy="90" r="3" fill="#0f0"></circle>
<circle cx="120" cy="100" r="3"></circle>
<line x1="10" y1="50" x2="20" y2="10"></line>
<line x1="40" y1="10" x2="60" y2="90" stroke="#0c0"></line>
<line x1="120" y1="100" x2="100" y2="50"></line>
</g>
</svg>
<svg style="width:120px;height:120px;border:1px solid black">
<g style="stroke:#0000ff;fill:none">
<path d="M10,50 Q20,10,50,50 T100,50"></path>
</g>
<g style="stroke:#ff0000;fill:none">
<circle cx="20" cy="10" r="3" fill="#0f0"></circle>
<circle cx="80" cy="90" r="3" fill="#0f0"></circle>
<line x1="10" y1="50" x2="20" y2="10"></line>
<line x1="20" y1="10" x2="80" y2="90" stroke="#0c0"></line>
<line x1="80" y1="90" x2="100" y2="50"></line>
</g>
</svg>
<br>
svg 最難理解的 Arc 這裡設了幾個範例，當旋轉 90 度後的紫色，因為短邊半徑 30 , 等於直徑 60 小於離終點的距離 (100) ，於是依照比例被放大了<br>
<svg style="width:220px;height:180px;border:1px solid black">
<g style="stroke:#0000ff;fill:none;stroke-width:2">
<path d="M10,50 L50,50 A70,30, 0,0,0,150,50 L200,50" stroke="#00f"></path>
<path d="M10,50 L50,50 A70,30, 0,1,0,150,50 L200,50" stroke="#f00"></path>
<path d="M10,50 L50,50 A70,30,20,1,0,150,50 L200,50" stroke="#0d0"></path>
<path d="M10,50 L50,50 A70,30,90,1,0,150,50 L200,50" stroke="#b0b"></path>
</g>
</svg>
svg 最難理解的 Arc 這裡設了幾個範例，當旋轉 90 度後的紫色，因為短邊半徑 30 , 等於直徑 60 小於離終點的距離 (100) ，於是依照比例被放大了
既然瞭解 path 的用法，就可以來畫一些有趣的圖了
<svg viewBox="-1,-1,102,102" style="width:100px;height:100px">
<circle cx="50" cy="50" r="50" fill="#fff" stroke="#000"></circle>
<path d="M50,0 A1,1,0,0,1,50,50 A1,1,0,0,0,50,100 A1,1,0,0,0,50,0" stroke="#000" fill="#000"></path>
<circle cx="50" cy="25" r="5" fill="#000" stroke="#000"></circle>
<circle cx="50" cy="75" r="5" fill="#fff" stroke="#fff"></circle>
</svg>
