canvas与svg特性和使用对比

两者比较一览

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:
• 地图交互: 查找路径
• 复杂工程流程图
• 网页游戏

使用场景一览