Canvas 和 SVG 的区别是什么？
Canvas 概述
Canvas API 提供了一个通过JavaScript 和 HTML的<canvas>元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。
Canvas API主要聚焦于2D图形。而同样使用<canvas>元素的 WebGL API 则用于绘制硬件加速的2D和3D图形。
Canvas 标签由 Apple 在 Safari 1.3 Web 浏览器中引入，之后进入 HTML 5 标准。
SVG 概述
可缩放矢量图形（Scalable Vector Graphics，SVG），是一种用于描述二维的矢量图形，基于 XML 的标记语言。作为一个基于文本的开放网络标准，SVG能够优雅而简洁地渲染不同大小的图形，并和CSS，DOM，JavaScript和SMIL等其他网络标准无缝衔接。本质上，SVG 相对于图像，就好比 HTML 相对于文本。
SVG 图像及其相关行为被定义于 XML 文本文件之中，这意味着可以对它们进行搜索、索引、编写脚本以及压缩。此外，这也意味着可以使用任何文本编辑器和绘图软件来创建和编辑它们。
和传统的点阵图像模式，像JPEG和PNG不同，SVG格式提供的是矢量图，这意味着它的图像能够被无限放大而不失真或降低质量，并且可以方便地修改内容。
SVG 是由万维网联盟（W3C）自 1999 年开始开发的开放标准。
二者比较
| SVG | Canvas |
|---|---|
| 基于矢量的(由形状组成) | 基于光栅(由像素组成)的位图 |
| 矢量图的伸缩性非常好，放大不失真 | 可伸缩性很差，不适合在高分辨率上显示 |
| 在对象数量更少（<1000）或表面更大的情况下提供更好的性能 | 绘制出来的图形是位图具有很好的渲染性能 |
| 可以通过 JS 和 CSS 进行修改 | 只能通过 JS 修改 |
| 有多个元素节点，是 DOM 的一部分 | 单一元素节点，表现类似于<img>，可以保存为 PNG、JPG 格式图片 |
| 交互简单，可以使用 JS 绑定事件 | API原始，一般使用第三方库提供的交互能力 |
相关库
开发者一般不会直接操作 canvas，都是使用封装好的库来干活~
