路徑（Path）
<path> 用一個 d 字串描述整段輪廓，是 SVG 最有彈性的形狀。圖示、曲線圖、不規則區塊最後幾乎都會變成 path。先會 移動、直線、關閉、三次貝茲，就能讀懂大多數匯出檔。
最常用的指令
大寫是絕對座標，小寫是相對位移。初學先用大寫比較好對。
| 指令 | 意義 | 例子 |
|---|---|---|
M x y |
移動到起點（不畫） | M 20 80 |
L x y |
直線到該點 | L 120 20 |
H x / V y |
水平／垂直線 | H 200 |
C x1 y1 x2 y2 x y |
三次貝茲（兩控制點） | 畫平滑曲線 |
Q x1 y1 x y |
二次貝茲（一控制點） | 較簡單的弧 |
A rx ry … |
弧線 | 圓弧、環形；參數較多 |
Z |
閉合回起點 | 填色區塊必寫 |
<svg width="320" height="140" viewBox="0 0 320 140" xmlns="http://www.w3.org/2000/svg">
<path d="M 20 100 L 80 30 L 140 100 Z"
fill="#ffcd39" stroke="#333" stroke-width="3"/>
<path d="M 180 100 C 200 20, 260 20, 300 100"
fill="none" stroke="#4051b5" stroke-width="4"/>
</svg>
左邊是三條直線加 Z 的三角形；右邊是一條三次貝茲曲線。
教材裡的「人生收支曲線」
曲線圖不要手算每一個像素，先定幾個錨點，再用 C 把中間接順：
<path d="M 40 160 C 120 160, 160 40, 240 80 S 360 200, 440 120"
fill="none" stroke="#e25555" stroke-width="3"/>
S 是「平滑三次貝茲」：自動鏡射上一段的控制點，折線比較不會出現尖角。
複雜 path 不要手刻
Logo 與插畫請用 Inkscape 或 Figma 匯出，再回來改 id、fill 與動畫。手寫是為了讀懂與微調，不是為了重畫整張插圖。