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 展示、动画、游戏
标签：Canvas,SVG,WebGL,js,图形,3D From： https://www.cnblogs.com/caroline2016/p/17243630.html