1）  SVG 指可伸缩矢量图形 (Scalable Vector Graphics)。 SVG 是使用 XML 来描述二维图形和绘图程序的语言    特点：基于图形，在html中绘制，放大缩小不失真，可以获取元素进行操作，适用于矢量图，低数据量低绘制频率的场景，如图形、图表

2）  HTML [canvas] 标签用于通过脚本（通常是 JavaScript）动态绘制图形。   特点：基于像素点，在js中绘制，放大缩小失真，无法修改操作，适用于数据量大、大量图形高频交互如动画、游戏，可导出Jjpg/png图片、它是位图，具有很好的渲染性能，比如Echarts中的炫光拖尾、热力图

• 总结： canvas 在HTML里面的确是有这样一种节点，这种节点占据一块页面区域，称之为画布，在这个画布上要进行任何的绘制都必须通过 JS 来完成，而且画出来的是位图，也就是说，他不会因为这块儿绘图区域的大小缩放而导致浏览器的重新绘制，那么因此他就不会有相应的性能问题。所以，可以通过 canvas 进行大数据量的绘画，正因为如此，它的使用场景会可以允许做像地图，像游戏这样的东西。

而 SVG 的话正相反，它不需要使用 JS 来绘图，他只要用 SVG 类型的节点嵌套去描绘所要绘制的图形，并且，在这些节点上面也可以像其他的普通DOM元素一样去触发事件，而且绘制出来的图片它是矢量图，意味着区域缩放的时候他会动态重新绘制，这两点意味着它的交互性会更好。因此，他会用来做一些小图标，做一些小规模的可视化。