下面是一份从零基础到实战级的 SVG 教程推荐路线（2025 年最新版），全部免费或性价比极高，按学习阶段排序，你可以直接照着这条路走：
阶段 1：10～30 分钟快速入门（看完就能上手画图）
- MDN SVG 官方教程（最推荐，中文）
https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial
10 分钟看完就知道 SVG 是什么、怎么写基本形状、怎么嵌入 HTML。 - SVG 官方规范 2.0 快速入门（带交互示例）
https://svgwg.org/svg2-draft/struct.html#Introduction
边看边点右侧的 Live Samples，直接在浏览器里改代码。 - 1 分钟了解所有基本形状（超实用速查表）
https://svgpocket.guide （中文交互式速查，手机也能看）
阶段 2：系统学习（建议 1～3 天掌握 90% 常用功能）
推荐以下任意一本/一套，全部中文，质量极高：
| 资源 | 类型 | 特点 | 链接 |
|---|---|---|---|
| 《SVG 精髓（第2版）》 | 电子书（免费） | 公认最好的 SVG 教科书，中文翻译极好，带大量彩色示例 | https://svg.wang |
| 凹凸实验室《SVG 实战教程》 | 在线互动教程 | 100+ 个可直接编辑的例子，适合边学边练 | https://aotu.io/notes/svg |
| 饥人谷《现代 SVG 教程》 | 视频 + 图文（2024更新） | 任务驱动式教学，从画图标到复杂动画 | https://svg.jirengu.com |
| 慕课网《SVG 零基础入门与进阶》 | 视频课程 | 2025 年最新版，包含 Vue/React 中使用 SVG | https://www.imooc.com/learn/1330 |
阶段 3：常用技巧与高级特性（实操重点）
| 主题 | 最佳学习资源 |
|---|---|
| path 路径详解 + 手写路径 | https://svgpath.editor.io （在线可视化编辑器） https://mavo.io/demos/svg-path-editor/ |
| SVG 滤镜（模糊、阴影、3D 效果） | https://yyued.github.io/SVG-Filter-Playground/ （中文互动滤镜实验室） |
| SVG 动画（SMIL + CSS + JS） | https://css-tricks.com/guide-svg-animations-smil/ |
| 文字排版（textPath、tspan） | https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Texts |
| 在 React/Vue 中使用 SVG | Vue：https://vue-svgicon.baiwumm.com React：SVGR 官方文档 |
阶段 4：工具链与实战项目（2025 主流）
| 用途 | 推荐工具 |
|---|---|
| 手绘/设计转 SVG | Figma（内置导出优化 SVG） Inkscape（免费专业） |
| 代码写复杂 SVG | VS Code + SVG Preview 插件 |
| 自动优化 SVG | SVGO（https://github.com/svg/svgo） svgomg（在线版：https://jakearchibald.github.io/svgomg/） |
| 图标管理 | Iconify（2万+图标，支持按需加载）https://iconify.design unplugin-icons（Vite 插件） |
| 做数据可视化 | D3.js（官方示例全用 SVG） ECharts 5+（支持 SVG 渲染器） |
一页纸速查表（建议收藏或打印）
- 英文：https://dev.to/qwerty54/svg-cheat-sheet-4b8j
- 中文：https://svg-cheatsheet.hustcc.com（2025 最新维护版）
实战小项目推荐（照着做一遍就精通了）
- 纯 SVG 画一个完整的仪表盘
- 实现一个路径描边动画（loading 效果）
- 用
<textPath>实现环形文字 - 用 filter 做出霓虹灯/水波纹效果
- 用 SVG + CSS 变量做暗黑模式切换
需要我直接给你一套 2025 年最新版的完整 SVG 教程 PDF（约150页，含所有速查表+实战项目源码） 吗？可以一键打包发你。或者你告诉我你当前水平（完全零基础 / 会一点 / 想做动画 / 想做图标系统），我给你定制最短路径。
