为什么选择 SVG 交互
很多关系其实不是一张图片能讲清楚的。方向会变化、状态会切换、局部会高亮，用户需要看到这些变化之间的联系。SVG 的优势在于它不是普通位图，而是由路径、形状、文字和标记点组成的结构化图形。
这意味着每一根线、每一个箭头、每一个区域都可以被单独控制。需要强调某一段路径时，可以让它发光或移动；需要比较前后状态时，可以让图形在同一个画面里平滑变化；需要适配不同屏幕时，也能保持边缘清晰。
1. 比普通图片更适合表达关系
普通图片适合展示结果，但不擅长表现变化。SVG 更像一套可被浏览器理解的图形零件，可以围绕路径、方向、层级和状态进行细粒度控制。
- 清晰：缩放后仍保持矢量边缘，不容易模糊。
- 可控：局部元素可以独立变色、移动、隐藏或高亮。
- 轻量：很多二维互动不需要大型引擎，也能获得稳定体验。
对于路径、箭头、流程、装置状态和几何关系这类内容，SVG 往往比截图或视频更适合作为互动底层。
2. 比视频更适合探索
视频只能按固定顺序播放，而 SVG 互动可以让用户自己切换参数、观察局部、暂停在某个状态上。它更像一个可以被操作的图形现场，而不是一段只能观看的录制内容。
在合适的场景中，SVG 可以承载方向切换、状态反馈、路径动画和分层展示，让浏览器端互动保持轻快，也让用户更容易把注意力放在变化本身。
3. 适合长期沉淀为网页案例
SVG 互动可以直接嵌入网页，便于整理成稳定的案例页面。用户打开浏览器即可查看，后续也能围绕同一套图形结构继续扩展状态、参数和说明。