Canvas与SVG

Canvas

Canvas最初由苹果在Mac操作系统上用Safari浏览器渲染用户界面组件和其他图形而开发的。

Canvas是一个底层、立即模式（immediate mode）的应用程序编程接口（API）：
底层
画布提供快速但相当基本的功能集。例如 矩形是仅有的原生形状
立即模式
当画布绘图被指令调用时，就立即被执行。这与SVG在绘图之前使用中间数据结构保存层级图形对象是不同的，画布没有这样的中间数据结构。这意味着，可以加入无线层的绘图操作而不影响性能——这对如像素图艺术包或其他精细的“层次”特效是特别完美的

画布兼具 矢量图 和 位图 的命令集，无论如何生成图像，画布最终可视的输出结果始终是位图。

Canvas的限制

• 缺乏视觉元素的数据结构，意味着开发者需要在JavaScript中创建自己的对象，来更新非静态图形元素的位置和其他属性
• 不能给画布中的绘制元素添加时间（如鼠标点击），因为它们并不是有形的实体，而只是瞬态的绘图操作。必须通过编程来实现。
• 充分利用画布需要有良好的JavaScript知识

SVG

SVG是保留模式（retained mode）的图形模型，将图形模型持久化在内存中。
画布与SVG的对比，两者都提供类似的图形能力，但它们有一个根本的区别：SVG是一个高层的、基于XML的标记语言，可以通过创建XML元素属性来定义图像；而画布则提供了可以直接从JavaScript访问的绘图API。

对比

canvas 适合绘制
Ray Tracing，一种3D图形的技术
绘制交互操作少，密集的粒子

SVG更适合
可伸缩的图形，例如图表，工程图等，并且容易交互

Canvas	SVG
基于像素	基于图形
单HTML标签元素	多图形DOM元素
通过JavaScript脚本改变	通过JavaScript脚本或CSS改变
支持事件模型/用户交互固定的（x, y）	事件模型/用户交互式抽象的（rect，path）
在小的画布中绘制大量（大于1万个）对象性能很好	小于1万个对象，大画布下的性能好

参考：
SVG vs canvas: how to choose, Microsoft Developer Network
SVG and canvas, WHATWG Wiki
7 Reasons to Consider SVGs Instead of Canvas, Craig Buckler
How to Choose Between Canvas and SVG, Patrick Dengler
SVG or Canvas? Сhoosing Between the Two, Mihai Sucan
SVG vs. HTML5 Canvas, Peter Paleologopoulos
DOM vs. Canvas, Kirupa Chinnathambi

https://www.sitepoint.com/canvas-vs-svg-choosing-the-right-tool-for-the-job/