一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。
svg
可缩放矢量图形（Scalable Vector Graphics，SVG），是一种用于描述二维的矢量图形，基于 XML 的标记语言, 这意味着可以使用任何文本编辑器(如记事本)创建和编辑SVG图像。
与JPEG和PNG这种传统的点阵图像模式不同，SVG格式提供的是矢量图，这意味着它的图像能够被无限放大而不失真或降低质量，并且可以方便地修改内容。
HTML <svg>元素是svg图形的容器。
<svg id="svgelem" height="200">
<circle id="greencircle" cx="60" cy="60" r="50" fill="#1E81FF" />
</svg>
canvas
<canvas>本身只是相当于一块画布，不具有绘图能力，必须通过脚本(通常是JavaScript)动态地绘制图形，脚本充当画笔的角色。元素只是图形的容器, 必须使用脚本来实际绘制图形。Canvas有几种绘制路径、框、圆、文本和添加图像的方法
<canvas id="newCanvas" width="100" height="100" style="border:1px solid #000000;">
</canvas>
<script>
var c = document.getElementById('newCanvas');
var ctx = c.getContext('2d');
ctx.fillStyle = '#1E81FF';
ctx.fillRect(0, 0, 100, 100);
</script>
二者的区别
SVG是一种基于XML中的2D图形的语言。
Canvas通过脚本动态绘制2D图形。
SVG是基于XML的，这意味着每个元素都在SVG DOM中可用, 可以为元素附加JavaScript事件处理程序。在SVG中，将每个绘制的形状记住为对象。如果更改了SVG对象的属性，则浏览器可以自动重新呈现形状。
Canvas由像素呈现,一旦图形在画布中绘制完成，浏览器撒手不管了。如果需要更改其位置，则需要重新绘制整个场景，其中许多对象会被频繁重绘。
详细对比如下：
| SVG | Canvas |
|---|---|
| 不依赖分辨率（矢量图） | 依赖分辨率（位图） |
每一个图形都是一个 DOM元素 | 单个HTML元素，相当于<img> |
| 支持事件处理器 | 不支持事件处理器 |
| 适合大型渲染区域的应用程序(谷歌地图) | 文本渲染能力差 |
| 可以通过脚本和CSS进行修改 | 只能通过脚本修改 |
对象数量较小 (<10k)、图面更大时性能更佳 | 图面较小，对象数量较大（>10k）时性能最佳 |
| 不适合游戏应用 | 适合图像密集型的游戏应用 |
