这是我参与2022首次更文挑战的第9天，活动详情查看：2022首次更文挑战」。
Canvas 和 SVG 都可以在浏览器上描绘图形，它们在功能上是等同的，但在根本上是不同的。
什么是SVG
- SVG 意为可缩放矢量图形（Scalable Vector Graphics），SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
- SVG 是基于 XML的，所以SVG DOM 中的每个元素都是可用的，可以为某个元素附加 JavaScript 事件处理器
- SVG 是万维网联盟的标准
什么是Canvas
HTML5新增了canvas标签，canvas翻译过来就是‘画布’的意思。
<canvas>标签只是一个图形容器，本身没有绘图能力，真正绘制图像是使用脚本(通常为 JavaScript)绘制。
打个比喻：
<canvas>标签就是作画的纸，JavaScript就是画画的笔。
标签的完整属性可以参考Canvas 参考手册.
SVG和Canvas的区别
<canvas> 标记和 SVG 之间的一个重要的区别就是，<canvas> 使用 JavaScript API绘图，而 SVG 使用xml元素，SVG文件就是存粹的XML。
它们实现功能上相同，可以相互模拟，但在根本上是不同的，其各自特点如下：
Canvas
- 依赖分辨率
- 不支持事件处理器
- 弱的文本渲染能力
- 能够以 .png 或 .jpg 格式保存结果图像
- 最适合图像密集型的游戏，其中的许多对象会被频繁重绘
SVG
- 不依赖分辨率
- 支持事件处理器
- 最适合带有大型渲染区域的应用程序（比如谷歌地图）
- 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
- 不适合游戏应用
各大浏览器支持情况
