从SVG到Canvas：选择最适合你的Web图形技术
SVG 和 Canvas 都是可以在 Web 浏览器中绘制图形的技术。 众所周知， icon 通常使用 svg（如 iconfont），而交互式游戏采用 Canvas。二者具体的区别是什么？该如何选择？
- 声明式还是命令式？
- 绘制的图形不同：Svg 绘制矢量图（不依赖分辨率），Canvas 绘制位图（依赖分辨率）；
- 事件处理不同：Svg 基于 XML，对 DOM、事件友好，Canvas 通过 javascript 绘制，内部元素添加事件比较复杂；
- Svg 对于 css 更加友好
声明式 pk 命令式
Svg 是矢量【声明式】
可缩放矢量图形（Scalable Vector Graphics，SVG）基于 XML 标记语言，用于描述二维的矢量图形。
作为一个基于文本的开放网络标准，SVG 能够优雅而简洁地渲染不同大小的图形，并和CSS、DOM、JavaScript 和 SMIL 等其他网络标准无缝衔接。本质上，SVG 相对于图像，就好比 HTML 相对于文本。
SVG 图像及其相关行为被定义于 XML 文本文件之中，这意味着可以对它们进行搜索、索引、编写脚本以及压缩。此外，这也意味着可以使用任何文本编辑器和绘图软件来创建和编辑它们。
SVG 代码可以直接在 HTML 中运行，就像声明性绘图指令：
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50" />
</svg>和传统的点阵图像模式（JPEG、PNG）不同的是，SVG 格式提供的是**矢量图，这意味着它的图像能够被无限放大而不失真或降低质量，并且可以方便地修改内容，无需图形编辑器。**通过使用合适的库进行配合，SVG 文件甚至可以随时进行本地化。
如果关心图形的灵活性和响应（不失真）能力，SVG 就是最佳选择。
Canvas 是一个 JavaScript 绘图 API【命令式】
Canvas 提供了一个通过 JavaScript 和 HTML 的元素来绘制图形的方式。
将一个<canvas>元素放入 HTML 中，然后使用 JavaScript 进行绘图。换句话说，可以发出命令告诉它如何绘制，典型的命令式！
<canvas id="myCanvas" width="100" height="100"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 50;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'green';
context.fill();
</script>DOM pk 画布
SVG 在 DOM 中
如果熟悉 DOM 事件（例如click和mouseDown等），那么 SVG 中也可以使用这些事件。
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50" />
<script>
document.querySelector('circle').addEventListener('click', e => {
e.target.style.fill = "red";
});
</script>
</svg>canvas 像画布
具有大量复杂细节和渐变的高度交互性工作是 Canvas 的领域。DOM 管理元素越多，速度就越慢，移动的元素越多，速度就越慢。且 Canvas 有不错的性能保障。由于这个原因，使用 Canvas 构建的游戏比使用 Svg 构建的游戏多得多。
与 CSS 的友好性
svg 可以很好的结合 css
与上述事件方式类似，可以通过css进行样式处理
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50" />
<style>
circle { fill: blue; }
</style>
</svg>