SVG 簡介
SVG（Scalable Vector Graphics，可縮放向量圖） 用 XML 描述圖形：線、圓、路徑與文字都是「指令」，不是像素點。放大不會模糊，檔案通常比點陣圖小，而且能用 CSS、JavaScript 著色、動畫與互動。
這份教材依實作順序編排：先搞懂畫布與嵌入，再畫形狀與路徑，接著處理中文排版（教材圖最常卡關的地方），最後才是重用、漸層、箭頭與動畫。
官方學習資源
MDN 官方文件（最重要）
MDN Web Docs：SVG 是瀏覽器實作的權威參考。入門請走 SVG from scratch。
規格與工具
規範見 W3C SVG 2。若要用繪圖軟體產出 SVG，官方免費工具是 Inkscape，內建教學在 Inkscape Tutorials。
站內已把較完整的免費影音（官方相關與評價較好的 YouTube）彙整成 影音教學，可用 iframe 直接看。
最必須先會的 20%
SVG 規格很大，但教材圖、圖示與簡單動畫只要先掌握這些：
- 畫布：
width/height與viewBox決定座標怎麼對到畫面。 - 基本形狀：
<rect>、<circle>、<line>、<polygon>先畫得出來。 - 路徑：
<path>的M、L、C、Z能畫曲線與不規則形。 - 填色與描邊：
fill、stroke、stroke-width。 - 文字：
<text>、<tspan>、text-anchor、writing-mode——中文不會自動換行，直排要自己設。 - 結構：
<g>分組、<use>重用、transform移動旋轉。 - 教材圖常用件：
<rect>當底、<path>畫曲線、<marker>加箭頭。
一句話記住中文排版：
用
<tspan>手動換行，用writing-mode做直排。
建議學習路徑
學習建議
邊改邊看
SVG 最適合「改一個數字立刻看結果」。把範例存成 .html 或直接內嵌在頁面，用開發者工具改屬性。
最小練習
畫一張 600×400 的教材封面：置中標題、右側直排「損失頻率」、中間兩行「風險移轉／（保險）」。完成後你已經會本站最核心的中文排版技巧。完整程式見 換行、直排與常見坑。