SVG 的优点是方便交互，因为它也有 DOM 结构，可以方便地监听事件。但是性能方面却有所影响：如果我们要绘制的图形非常复杂，这些元素节点的数量就会非常多。而节点数量多，就会大大增加 DOM 树渲染和重绘所需要的时间。
    相比来说，Canvas 交互实现就不太容易，因为对每个图形的拾取（判断鼠标点位置在哪个图形上）需要开发者自己实现（很多渲染引擎会解决这个问题，我们后面会看到），但是它的绘制性能却相对较优。
    所以当数据量不大且侧重交互的情况，用 SVG 比较合适；当数据量较大的时候用 Canvas 比较合适。

    个人感觉这段话概况得比较精练，就偷过来了。出处是这篇掘金小册子，顺便打个广告(狗头。
    链接：https://juejin.cn/search?query=%E4%BB%8E0%E5%88%B01%E5%BC%80%E5%8F%91%E5%9B%BE%E8%A1%A8%E5%BA%93
    image.png
    虽然在 antv 干了三个多月，但是其实很少自己写过 canvas 或者 svg。一般都有 G2、G6 这些。它们低层基于 G 引擎。G 引擎封装了 svg 和 canvas 两套渲染引擎。不过当时流程图的时候用 svg 自定义过很多不同形状的节点，确实写起来感觉就像操作 DOM 一样。绑定事件监听也很容易，也听隔壁维护 G2 的老哥吐槽过 canvas 绑定事件监听很麻烦。
    Yworks 曾经使用 2015 macbook对 svg、canvas、webgl 这 3 种渲染方法进行了很好的比较。在节点数小于 3k，边边数小于 2k 时，svg 性能最佳；当节点数和边数达到 5k 时，canvas 最佳性能最佳；当节点数和边数在 10k 以上时，webgl 则一骑绝尘。