建立 2026-09-14 更新 2026-09-14

影音教學

W3C 與 MDN 沒有一套官方影音課程，權威材料仍是書面規格與 MDN 教學。下面彙整官方文件、Inkscape 原廠教學，以及 YouTube 上口碑較好、可免費觀看的入門與動畫影片。各段附 iframe，可直接在本頁播放。

建議順序：先看百分秒建立直覺 → 10 分鐘或 24 範例打底 → 再挑動畫或播放清單往下做。

官方與原廠（書面為主）

MDN 官方文件

SVG 與 SVG from scratch 是瀏覽器實作的對照本。本站各單元末的「進一步學習」都指向對應章節。

W3C 規格

SVG 2 給需要查屬性定義的人。日常開發不必整本讀完。

Inkscape 原廠教學（免費繪圖工具）

Inkscape Tutorials 與軟體內 Help → Tutorials 是官方操作講義。適合「先畫再匯出、再回頭改 markup」的流程。

約一分半：向量 vs 點陣、為什麼 logo／圖示該用 SVG、以及它本質上是「可進 DOM 的 XML」。適合完全沒接觸過的人，看完再讀簡介。

十分鐘走完形狀、viewport / viewBox、漸層、文字與 path，並用漢堡選單、笑臉當例子。適合想一次看到「講義目錄長什麼樣」的人，細節仍請對照本站各單元。

從基本形狀、曲線、到動畫與互動，用 24 個可讀原始碼的例子往上疊。作者同時維護 svg-tutorial.com 與 freeCodeCamp 文章。這是目前社群裡最常被推薦的「用手寫 SVG」長片，對應本站基本圖形與路徑。

示範從 Figma 匯出（保留 id）、清掉寫死的 fill、用 CSS 變數做雙色圖示，再做 hover 與循環動畫。對應本站 CSS 與 SVG、動畫。原始碼：fireship-io/animated-svg-demo。

從 SVG 基本形狀接到 @keyframes、transform、transform-origin 與簡單 3D 旋轉。節奏比上一支慢，適合第一次把 CSS 動畫套到 SVG 上的人。

用 <textPath> 讓文字沿曲線走，再用捲動更新 startOffset。對應本站文字與對齊的路徑文字；中文標題若要做同樣效果，記得字型與字距要另外調。

播放器右上角可切集數。適合當「第二教材」跟著做，觀念仍以 MDN 與本站為準。

系統性分集：畫布、形狀、樣式再往上疊。適合想用影片當主線、文章當查詢的人。

另一套分集教學，涵蓋元素與屬性較廣，遇到本站沒寫到的標籤時可當補充。