SVG、Canvas、WebGL对比

SVG

使用 XML 描述 2D 图形。SVG 中的元素和 HTML 元素一样，在输出图形前需要经过浏览器引擎的解析、布局计算和生成 DOM 树（SVG 元素太多时非常消耗性能），可以添加事件。SVG 对象的属性发生变化，浏览器自动重现图形。SVG 绘制矢量图形，不依赖于终端设备的像素，可以随意放大缩小不会失真。

适合场景：绘图面积大，数据量小。

使用 SVG 的 js 组件：d3.js、plotly.js ...

Canvas 2D

通过 Javascript 来绘制 2D 图形，不需要浏览器引擎的解析、布局计算和生成 DOM 树（因此性能较 SVG 好）。逐像素进行渲染（要绘制的图形太多或者处理大量的像素计算遇到性能瓶颈），其位置发生改变，会重新进行绘制。

适合场景：绘图面积小，数据量大。

使用 Canvas 的 js 组件：echarts ....

WebGL

WebGL（全写 Web Graphics Library）是一种 3D 绘图协议，这种绘图技术标准允许把 JavaScript 和 OpenGL ES 2.0 结合在一起，通过增加 OpenGL ES 2.0 的一个 JavaScript 绑定，WebGL 可以为 HTML5 Canvas 提供硬件 3D 加速渲染，这样 Web 开发人员就可以借助系统显卡来在浏览器里更流畅地展示 3D 场景和模型了，还能创建复杂的导航和数据视觉化。显然 WebGL 技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂 3D 结构的网站页面，甚至可以用来设计3D网页游戏等等。

适合场景：3D 展示、动画、游戏。