漸層、裁切與箭頭
這三個都先在 <defs> 定義，再被形狀引用。教材裡的色帶、半圓遮罩、流程箭頭都走這條路。
線性與徑向漸層
<svg width="280" height="80" viewBox="0 0 280 80" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="sky" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#4051b5"/>
<stop offset="100%" stop-color="#e25555"/>
</linearGradient>
</defs>
<rect x="10" y="16" width="260" height="48" rx="8" fill="url(#sky)"/>
</svg>
fill="url(#sky)" 用的是同一個文件裡的 id。x1 y1 x2 y2 可用 0–1 的物件比例座標。
徑向漸層用 <radialGradient>，高光與圓形按鈕較常用。重複花紋則是 <pattern>。
clipPath 與 mask
clipPath：硬裁切，路徑外的全部消失。mask：用明暗決定透明度，可做羽化、半透明挖空。
<defs>
<clipPath id="chip">
<rect x="0" y="0" width="160" height="80" rx="16"/>
</clipPath>
</defs>
<image href="../photo.jpg" width="200" height="120" clip-path="url(#chip)"/>
只顯示圓角矩形裡的影像。純色塊用 clip 就夠；需要漸層透明再用 mask。
<marker> 箭頭
流程圖與座標軸的箭頭不要手畫三角形再對齊，用 marker 掛在 path 端點：
<svg width="280" height="80" viewBox="0 0 280 80" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5"
markerWidth="8" markerHeight="8" orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" fill="#e25555"/>
</marker>
</defs>
<path d="M 20 40 L 240 40"
stroke="#e25555" stroke-width="4"
marker-end="url(#arrow)"/>
</svg>
orient="auto" 會跟著路徑方向轉。refX / refY 決定箭頭尖端對齊線的哪一點；對不準就微調這兩個數字。
起點箭頭用 marker-start，折線頂點用 marker-mid。
濾鏡（知道即可）
<filter> + feGaussianBlur、feDropShadow 能做模糊與陰影，效能與跨瀏覽器細節較多。簡單陰影優先用 CSS filter: drop-shadow() 打在整個 <svg> 上。