核心区别概述
| 特性 | Canvas | SVG |
|---|---|---|
| 图形类型 | 位图（像素栅格） | 矢量图（数学描述） |
| 渲染方式 | 即时模式（命令式） | 保留模式（声明式） |
| DOM结构 | 单元素，无内部DOM | 多元素，有完整DOM树 |
| 缩放表现 | 放大失真（像素化） | 放大不失真（无限缩放） |
| 适用场景 | 动态、像素级操作 | 静态、交互式图形 |
详细对比
1. 技术本质
- Canvas：
- 基于像素的绘图API
- 通过JavaScript直接操作像素
- 绘制后图形信息不保留（除非手动管理）
- SVG：
- 基于XML的矢量图形描述语言
- 图形元素作为DOM节点存在
- 浏览器负责渲染和维护图形状态
2. 性能特征
- Canvas 优势：
- 大量对象绘制（数千+）性能更佳
- 游戏、实时数据可视化等高帧率场景
- 像素操作（图像处理、滤镜）效率高
- SVG 优势：
- 少量到中等数量图形时响应更快
- 局部更新时无需重绘整个场景
- 浏览器可优化矢量渲染
3. 交互能力
- Canvas：
- 无内置事件系统
- 需手动实现点击检测（如坐标计算）
- 适合低交互或自定义交互逻辑的场景
- SVG：
- 完整DOM事件支持（click、mouseover等）
- 每个图形元素可单独绑定事件
- CSS动画、悬停效果直接支持
4. 开发体验
- Canvas：
const ctx = canvas.getContext('2d');
ctx.fillRect(10, 10, 100, 100); // 绘制后无法直接修改
- SVG：
<svg>
<rect x="10" y="10" width="100" height="100"
fill="blue" onclick="handleClick()"/>
</svg>
5. 应用场景
- 选择 Canvas 当：
- 开发游戏、物理模拟
- 实时图表（股票交易、监控仪表盘）
- 图像/视频处理工具
- 像素艺术或特效生成
- 选择 SVG 当：
- 数据可视化（图表、地图）
- 图标系统、LOGO
- 可缩放用户界面
- 需要打印的高质量图形
6. 现代应用趋势
| 需求 | 推荐技术 | 理由 |
|---|---|---|
| 数据可视化 | SVG（D3.js等） | 交互丰富，易于动画 |
| 游戏开发 | Canvas（WebGL） | 高性能，直接像素控制 |
| 动态图表 | 两者结合 | SVG绘制静态元素，Canvas绘制动态层 |
| 地图应用 | SVG（简单）或Canvas（复杂） | 根据交互复杂度选择 |
实际项目选择建议
考虑 Canvas 如果：
- 需要处理大量图形对象（>1000个）
- 对性能要求极高（60fps+）
- 进行像素级操作（图像处理）
- 不需要复杂的元素级交互
考虑 SVG 如果：
- 图形需要独立交互
- 需要高质量打印输出
- 图形结构相对稳定
- 希望利用CSS进行样式控制
混合使用策略
现代应用常混合使用：
- 主场景：Canvas处理动态背景/粒子
- 交互层：SVG处理UI控件、标注
- 优化方案：使用Canvas绘制静态部分，SVG处理交互元素
代码示例对比
绘制可点击的圆
<!-- SVG方式 -->
<svg width="200" height="200">
<circle cx="100" cy="100" r="50" fill="red"
onclick="alert('Clicked!')"/>
</svg>
<!-- Canvas方式 -->
<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 绘制
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2);
ctx.fillStyle = 'red';
ctx.fill();
// 手动实现点击检测
canvas.addEventListener('click', (e) => {
const rect = canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const dist = Math.sqrt((x-100)**2 + (y-100)**2);
if (dist <= 50) alert('Clicked!');
});
</script>
总结
两者不是竞争对手，而是互补技术：
- Canvas = 画家的画布，绘制后即固定
- SVG = 乐高积木，每个部件可独立操作
选择取决于具体需求：性能敏感选Canvas，交互丰富选SVG，复杂场景可结合使用。
