想要分清楚两者的区别，首先我们要知道他们具体是什么。Canvas 是 HTML5 提供的新元素，而 SVG 并不属于 html，在 html 5 中，很多人会觉得 canvas 与 svg 差不多，也不知道要怎么去用，那么，就一起来看看吧。
Canvas
主要是用笔刷来绘制 2D 图形的。
- Canvas 是通过 JS 来绘制的。
- Canvas 图像单位是像素，是逐像素进行渲染的。
- 绘制完毕之后，浏览器将不再关注它。
- 如果位置发生变换，就需要重新绘制，整个场景都将重绘，包括任何或许已被图形覆盖的对象。
SVG
主要是用标签来绘制不规则矢量图的。
- SVG 使用 XML 描述的2D图像。
- SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。可以为某个元素附加 JS 事件处理器。
- SVG 绘制的图像是一个对象，如果对象的属性发生改变，浏览器将重绘。
相同点
都是主要用来画 2D 图形的。
不同点
- Canvas 画的是位图，SVG 画的是矢量图。
- SVG 节点过多时渲染慢，Canvas 性能更好一点，但写起来更复杂。
- SVG 支持分层和事件，Canvas 不支持，但是可以用库实现。
- SVG 是一种矢量图，而 Canvas 依赖于分辨率。所以 SVG 放大不会失真（很适合做地图），但是 Canvas 会。
- SVG 支持事件处理器，而 Canvas 不支持事件处理器。
- SVG 中的文字独立于图像，文字可保留，可编辑和可搜索，Canvas 的文本渲染能力弱。
- Canvas 适合图像密集型的游戏，频繁地重绘图像，SVG 绘制的复杂度高时减慢渲染的速度。
- Canvas 绘制的图形可以多种格式 (jpg、png) 保存图片，但是 SVG 绘制的只能以 .SVG 格式保存，使用时可以引入 html 文件。
- Canvas 渲染性能高，适合开发游戏，除此之外，还有统计中常见的柱状图、饼图、雷达图等也使用的 Canvas 。SVG 不适合游戏应用。
- Canvas只能给整个画布添加事件，而不能给某个图形或文件添加事件处理器，但是 SVG 支持事件绑定，如果需要添加带有事件的动画效果时，就需要选择 SVG。
