两者比较一览
| Canvas | Svg |
|---|---|
| 基于像素的(动态png) | 基于形状的 |
| 单个html元素 | 多种多样的形状dom元素 |
| 只能通过script修改 | script和css都可以修改 |
| 事件模型和用户交互需要使用像素(x, y) | 事件模型和用户交互抽象到元素(rect, path) |
| 绘图面积小或者对象大于10k时性也能很好 | 绘图面积很大或者对象小于10k的时候性能很好 |
性能对比曲线图
canvas vs svg 性能(来源microsoft开发社区)
使用场景举例
- svg
1.静态图像
2.高保真文档(用于展示和打印) - canvas
1.处理视频
2.复杂场景、实时复杂数学动画
3.基于图像位置的快速计算处理
图表和图形
svg和canvas都可以表现图表(如柱状图, 散点图, 饼图等等), 在选择开源的第三方库绘图的时候应该要注意根据使用场景来选择
以下情况使用svg为佳:
- 数据源是或者类似xml(svg)文档
- 需要用户交互
- 使用到css就可以满足大部分样式需求
但是如果需要更高的速度, 那么需要使用canvas: - 地图交互: 查找路径
- 复杂工程流程图
- 网页游戏
使用场景一览
