SVG和Canvas哪个更高效？别再纠结了，看场景选才对

做前端开发时，遇到图形渲染总会碰到一个选择题：用SVG还是Canvas？网上说法五花八门，有人说SVG灵活，有人说Canvas快。其实，哪个更高效，得看你在画什么、怎么用。

SVG：基于DOM的矢量画布

SVG是“可缩放矢量图形”的缩写，本质是HTML标签的一种，每个图形元素都是一个DOM节点。比如画个圆：

<svg width="200" height="200">
  <circle cx="100" cy="100" r="50" fill="blue" />
</svg>

这个circle标签可以被JavaScript操作，也能绑定点击事件，就像普通div一样。如果你要做交互丰富的图表，比如地图上的区域点击、动态高亮，SVG天生就适合。

但问题也在这儿——DOM节点越多，页面越慢。要是你要画上千个图形，浏览器得维护上千个节点，内存占用上来了，操作卡顿也就难免了。

Canvas：像素级的绘图板

Canvas不一样，它是一块画布，你通过JavaScript在上面“一笔一笔”地画。比如同样画个圆：

<canvas id="myCanvas" width="200" height="200"></canvas>