场景对照
机制章按 API 切。落地时按产品找入口，避免只读完 01 就开始写编辑器。
| 你要做的东西 | 先读 | 不要做的事 |
|---|---|---|
| 图标 / sprite | 02 use、05 嵌入、10 图标 | 不把 200 个 icon 做成 200 个 HTTP |
| 响应式插画 | 01 viewBox、05 preserveAspectRatio | 不靠 width/height 绝对像素硬撑 |
| 可点击热区 | 10 热区、03 命中、03 无障碍 | 不把热区做成 <img> 上的透明 canvas |
| 图表 / 可视化 | 10 图表、06 节点成本、09 D3 | 不给每个数据点一个带滤镜的 path |
| 流程图 / 节点编辑 | 10 流程图、03 手柄、10 撤销 | 不把连线存成截图像素 |
| 无限画布 / 矢量白板 | 03 相机、06 虚拟化、10 白板 | 不靠 CSS scale 整棵 DOM |
| 地图 / 平面图 | 10 地图、03 相机、06 裁剪 | 不一次挂载整国 path |
| 交互动效插画 | 04 CSS/WAAPI、07 SMIL | 不把 SMIL 写进要消毒的用户 SVG |
| 在线矢量编辑器 | 10 编辑器、02 path、08 序列化 | 不 innerHTML 往回灌用户文件 |
| 打印 / PDF | 10 打印、05 嵌入 | 不先转 PNG 再打印再抱怨发糊 |
| 进度环 / 仪表 | 10 仪表盘、04 描边 | 不把 dasharray 当通用动画框架 |
| 要不要上 D3 / svg.js | 09 两篇 | 不把库当「不用懂 viewBox」 |
| 其实该用 Canvas | Canvas 选型 | 不在 SVG 里模拟笔刷 backing store |
能力分层仍见 README。本表解决「场景在哪篇」。