在 SVG 裡我們使用 path 來繪製線條，因為 path 很複雜，所以只要搞懂 path 應該就能理解大多數 svg 線條的方式了。
SVG Path 的指令包含如下：
M = 起始點，後面的數字表起始點座標
L = 下一個指定的點，後面的數字 x, y 代表點的座標
H = 表示水平線下一個點的 x 軸位置
V = 表示水平線下一個點的 y 軸位置
C = 從目前的點到下一個點的座標，可以用中間的值改變曲線的曲率
S = 從目前點的座標畫條鏡射的貝茲曲線到指定點的 x, y 座標
Q = 就是起點跟終點共用一個控制點
T = 從目前點的座標畫條反射二次貝茲曲線到指定點的 x, y 座標：以前一個座標為反射控制點
Z = 關閉曲線
來看一下範例，如果是一開始設置起點
像這樣就可以畫一條 (0,0) 到 (0,50) 的水平線
<path d="M0 0 H50" stroke="black" stroke-width="4px">
</path>把 H 改成 V 就是畫一條垂直線。
使用 L 則可以連接到下一個點，並不斷連接下去。
<path d="M0 0 L50 50" stroke="black" stroke-width="4px">
</path>
最後的 Z 就是把曲線封閉起來，不用設定其他參數。
<path d="M0 0 L50 50 L100 50 L200 10 Z" stroke="black" stroke-width="4px" fill="none">
</path>
以下則是上面幾個範例的結果：
