选型边界

SVG 是图形栈里的 文档，不是慢一号的 Canvas，也不是 CSS 画圆的替代品。选错的代价不是「帧率差一点」，而是命中、无障碍、撤销、导出同时绑错真相源。

从 SVG 侧问：这一帧的真相是不是节点？ 是，才留在本体系。像素笔刷、视频帧、粒子着色，去 Canvas / WebGL；一张卡片上的圆角和渐变，先问 CSS。

混用是常态，不是妥协。结构、选择、对齐走 SVG；墨迹、密度图、滤镜烘焙走 Canvas。不要强迫一种表面同时当文档和 backing store。

文档清单

文档	解决的问题
SVG vs Canvas vs CSS	判定流程、何时混用
自研 vs D3 / svg.js	数据 join ≠ 渲染器；不要 Snap.svg 新项目

和 Canvas 选型 对读：那边从像素问过来，这边从文档问过去。不要把那篇抄成「SVG 版」。

先用这一章否决「整个产品一张 canvas」，再进 10 生产场景。

核对日期：2026-08-26