从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 中运行，就像声明性绘图指令：

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 进行绘图。换句话说，可以发出命令告诉它如何绘制，典型的命令式！

html 复制代码

<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 中也可以使用这些事件。

html 复制代码

<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进行样式处理

html 复制代码

<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="50" />
  <style>
    circle { fill: blue; }
  </style>
</svg>