总览与学习路径
这一章把 SVG 放进前端图形栈里，避免一上来就记元素名。
这一章覆盖什么
- SVG 在浏览器图形栈中的位置
- 保留模式 vs 立即模式
- 学习顺序和能力分层
- 和 Canvas、CSS、WebGL 的职责切分（细节见 09 选型）
文档清单
| 文档 | 解决的问题 |
|---|---|
| 本 README | 路线与分层 |
| 保留模式与文档树 | 为什么生产代码操作的是节点，而不是「画完就算」 |
| 场景对照 | 图标/图表/流程图/白板等从哪篇读起 |
能力分层
| 层级 | 表现 |
|---|---|
| L1 能画 | 能在已知 viewBox 的 <svg> 里放 path / 图 / 字 |
| L2 能对齐 | viewport、viewBox、CSS 尺寸、指针坐标四者一致，缩放不裁错 |
| L3 能交互 | 变换后的节点可命中、可拖、可撤销 |
| L4 能跑 | 动画不卡主线程、节点可虚拟化、滤镜光栅有策略 |
| L5 能选 | 说得出这张图为什么不是 Canvas 或纯 CSS |
本体系默认读者从 L1 附近起步，正文按 L2–L4 写。L1 的「画个圆」教程不占篇幅。
不适用
- 需要像素级笔刷、涂抹、逐帧视频处理：不要用 SVG 硬模拟 backing store，见 Canvas 体系。
- 需要三维、大量精灵、自定义着色器：选型章之后走 WebGL/WebGPU。
- 需要无障碍树却把全部图形塞进一张
<img src="*.svg">：那棵树进不去。