Canvas 和 SVG 有什么区别？

Canvas 与 SVG 核心差异解析

1. 渲染模式本质

维度	Canvas	SVG
图形类型	位图（像素级操作）	矢量图（数学公式描述）
渲染模式	立即模式（绘制后无对象保留）	保留模式（DOM 树维护图形对象）
更新机制	全量重绘	增量更新

 

2. 性能特征对比

场景	Canvas 优势	SVG 优势
大规模动态图形	高频刷新效率高（游戏/数据可视化）	元素超过 10k 时性能显著下降
静态复杂矢量图形	需要自行实现矢量渲染逻辑	原生支持复杂路径和渐变
内存占用	固定分辨率内存消耗	DOM 节点数直接影响内存占用

3. 开发范式差异

能力	Canvas 实现方式	SVG 实现方式
事件交互	需手动计算坐标区域	原生支持图形级事件绑定
动画控制	依赖 requestAnimationFrame 逐帧绘制	可使用 CSS/SMIL 声明式动画
文本渲染	低级 API 控制	原生文本标签 + CSS 样式控制

 

// Canvas 点击检测
canvas.addEventListener('click', (e) => {
  const rect = canvas.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  if (x > 10 && x < 160 && y > 10 && y < 90) {
    console.log('Canvas矩形被点击'); // 需手动计算边界
  }
});

// SVG 事件绑定
document.querySelector('rect').addEventListener('click', () => {
  console.log('SVG矩形被点击'); // 原生支持
});

 

4. 工程化特性

维度	Canvas	SVG
可访问性	依赖 ARIA 标注	原生支持语义化标签
SEO 友好性	内容不可被搜索引擎直接抓取	文本内容可被索引
响应式适配	需监听 resize 事件重新绘制	通过 viewBox 属性自动缩放

技术选型决策矩阵

考量因素	推荐选择	典型场景
高频刷新/游戏开发	Canvas	第一人称射击游戏、实时股票图表
高保真打印输出需求	SVG	企业 Logo、宣传物料设计
复杂 UI 交互实现	SVG	可拖拽拓扑图、流程图编辑器
大数据量点云渲染	Canvas	地理信息系统热力图
动态数据可视化	两者结合	D3.js 的 Canvas 渲染后端

演进趋势

• WebGPU 时代：Canvas 通过 WebGPU 接入 GPU 加速，强化 3D/AR 能力
• SVG 2.0 规范：新增混合布局、几何函数等高级特性
• 混合方案：通过  在 SVG 中嵌入 Canvas 实现性能与精度的平衡