SVG在缩放不失真、原生交互、无障碍支持和语义化方面更优，适合图标、地图、图表等场景；Canvas则适用于高频重绘如游戏、粒子动画和实时仪表盘。
SVG不是“首选”，而是特定场景下的更优解。它在清晰度、交互性、可访问性和响应式适配上优势突出，但并不适用于所有图形需求——比如高频重绘的游戏画面，Canvas反而更合适。
缩放不变形：矢量本质决定显示质量
SVG用数学公式描述图形（如圆心坐标、半径、路径贝塞尔曲线），放大10倍仍是精准线条；Canvas基于像素栅格，放大后出现锯齿或模糊。这对图标、地图、数据图表、打印输出等需要多尺寸适配的场景至关重要。
- 网页图标随设备DPI自动锐化，无需准备多套png资源
- 地图应用（如Google Maps）能平滑缩放至街区级，不依赖切片图瓦
- 报表图表导出PDF时保持印刷级清晰度
原生可交互：每个元素都是DOM节点
一个<circle>或<path>在页面中就是真实存在的HTML元素，可直接绑定click、hover、focus事件，也能用CSS设置过渡动画、伪类样式、filter效果。
- 不用手动计算点击坐标去判断是否击中某个图形区域
- 支持键盘导航和屏幕阅读器读取title/desc标签，符合WCAG无障碍标准
- 动态更新某条折线颜色，只需
line.style.stroke = 'red'，无需重绘整幅图
轻量且语义清晰：文本格式 + 可编辑结构
SVG是纯XML文本，可压缩、可Gzip、可内联到HTML中，避免额外HTTP请求；源码直观，设计师与前端可协同调整锚点、颜色、层级。
立即学习“前端免费学习笔记（深入）”；
- 图标字体正在被内联SVG替代——无渲染延迟、无字体加载失败风险
- 用
<use href="#icon-home">复用定义好的图形，减少重复代码 - 配合CSS变量（如
fill: var(--primary)），实现主题一键切换
何时不该选SVG？需避开这些瓶颈
SVG强在“保留模式”（Retained Mode）：图形对象长期驻留DOM中。但当节点数超数千、频繁增删或动画帧率要求60fps以上时，DOM操作开销会拖慢渲染。
- 实时股价K线图每秒刷新上百个点 → Canvas逐帧绘制更稳
- 粒子系统模拟火焰/烟雾 → Canvas的像素级控制更高效
- 复杂UI编辑器（含万级可拖拽图元）→ 需结合Canvas渲染背景+SVG做顶层控件
