座標系統與 viewBox
SVG 的原點在左上角，x 往右、y 往下增加（和數學課的笛卡兒座標相反）。搞錯這個方向，文字與箭頭會整張飛掉。
width / height 是元素在頁面上佔多大；viewBox 是「內部座標系統」的範圍。兩者分開，圖才能在不同尺寸下保持比例。
最小畫布
<svg width="300" height="160" viewBox="0 0 300 160"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="120" height="80" fill="#4051b5"/>
<circle cx="220" cy="80" r="40" fill="#e25555"/>
</svg>
viewBox="minX minY width height"：這裡從 (0, 0) 開始，內部寬 300、高 160，剛好對上外框。
為什麼需要 viewBox
同一個 viewBox 可以塞進不同的外框尺寸，圖會一起縮放、線條仍是向量：
<svg width="150" height="80" viewBox="0 0 300 160">…</svg>
<svg width="100%" viewBox="0 0 300 160">…</svg>
教材圖建議固定一個內部座標（例如 0 0 600 400），用 width="100%" 讓它隨欄寬縮放。標題、直排文字的 x / y 都用這套內部數字，之後改外框不必重算。
比例對不齊時
外框比例和 viewBox 不同時，由 preserveAspectRatio 決定怎麼放：
| 值 | 行為 |
|---|---|
xMidYMid meet（預設） |
完整顯示、置中、可能留白 |
xMidYMid slice |
填滿外框、多餘部分被裁 |
none |
拉扯變形，通常不要用 |
只寫 width/height、不寫 viewBox
圖可以顯示，但改外框大小時內部座標不會跟著對應，響應式會很難做。教材與圖示請一律寫 viewBox。