群組、重用與變形
把相關圖形包在 <g>，共用的零件放進 <defs> / <symbol>，再用 <use> 叫出來。移動與旋轉用 transform，不要逐個改 x / y。
<g> 分組
群組可以繼承 fill、stroke、transform。教材圖常把「座標軸」或「同一顏色的圖示零件」分成一組，方便一次改色。
<g fill="#4051b5" stroke="#1a237e" stroke-width="2">
<rect x="20" y="20" width="60" height="40"/>
<circle cx="120" cy="40" r="20"/>
</g>
<defs>、<symbol>、<use>
<defs> 裡的東西不直接畫出來，只供引用。<symbol> 還自帶 viewBox，適合圖示系統。
<svg width="200" height="80" viewBox="0 0 200 80" xmlns="http://www.w3.org/2000/svg">
<defs>
<symbol id="dot" viewBox="0 0 20 20">
<circle cx="10" cy="10" r="8" fill="currentColor"/>
</symbol>
</defs>
<use href="#dot" x="20" y="30" width="20" height="20" color="#e25555"/>
<use href="#dot" x="80" y="30" width="20" height="20" color="#4051b5"/>
<use href="#dot" x="140" y="30" width="20" height="20" color="#2e7d32"/>
</svg>
舊文件可能寫 xlink:href；現代瀏覽器請用 href。
外部檔的 use
<use href="../sprite.svg#dot"> 有跨來源限制。同一站沒問題；從別的網域拉 sprite 常常畫不出來。圖示集與頁面放同來源最穩。
transform
| 函式 | 作用 |
|---|---|
translate(x y) |
平移 |
scale(s) / scale(sx sy) |
縮放（以原點為準） |
rotate(deg) |
繞原點旋轉 |
rotate(deg cx cy) |
繞指定點旋轉 |
<g transform="translate(200 80)">
<rect x="-30" y="-16" width="60" height="32" fill="#4051b5"/>
<text x="0" y="6" text-anchor="middle" fill="#fff" font-size="14">節點</text>
</g>
先 translate 到錨點，再畫以 (0, 0) 為中心的零件，旋轉與重用都比較直覺。scale(-1 1) 可做左右鏡射。
順序是從右到左套用（和數學矩陣一樣）。寫 transform="translate(80 40) rotate(30)" 時，視覺上通常是先旋轉再平移；搞混就拆成巢狀 <g>。