原文：https://www.yworks.com/blog/svg-canvas-webgl
1 SVG was and is the best option for rendering high-quality vector graphics
从技术上来说，SVG实际上比画布优越得多，因为它导入图形资产更容易，而且对非普通图形的性能更好，对于非常简单的图形，只需要简单的线条和几个矩形，或者简单的圆，如果同时在屏幕上有许多元素，画布的性能实际上会更好。
我们的组件使用“虚拟化”，不渲染那些当前从屏幕上滚动的元素，但是如果用户希望同时在屏幕上显示数千个元素，如果绘图的数量高且渲染非常简单，SVG仍然无法与画布的性能相抗衡。
2 Canvas is faster for simple graphics
一旦用户放大可视区域，屏幕上只有很少的元素可见，我们就使用SVG来显示清晰、高质量、复杂的矢量图形。
当用户缩小可视区域以获得网络或图表的概述时，我们无缝的改用 Canvas，并使用更简单的可视化元素来绘制。
当用户再缩小，直到可视区域有是十万个点时，就得切换到 WebGL 了。
Demo：https://live.yworks.com/demos/view/largegraphs/
3 Introducing WebGL rendering
yFiles for HTML 2.1 版本支持 WebGL 了。开发人员可以同时在同一个 diagram 中混合 SVG/Canvas/WebGL 三种技术，以获得最佳效果。
当绘制一些由简单的几何组成的 diagram 时，WebGL 性能绝对完胜 Canvas 和 SVG。 但 WebGL 在高质量的文本渲染和复杂的图形渲染中效果不佳，大多数时间甚至更慢。
即使使用当今台式CPU的简单内置芯片图形卡适配器，也可以以完美的帧速率同时在屏幕上呈现数万个元素。在台式机上配备中型图形卡适配器时，屏幕上超过十万个元素的高帧速率是绝对可行的。所有绿色浏览器（chrome、firefox、edge、safari和衍生产品）都支持这项技术，并且使用WebGL，甚至比台式机慢得多的移动设备（CPU-wise）也可以使用其内置的GPU以很高的帧速率呈现大量的项目。
4 Our recommendation
如果你真的需要同时在屏幕上显示数万个元素，webgl 就是你的救命稻草。您可以添加画布渲染来渲染标签，对于特写镜头，您可以再次切换到SVG，以获得高质量、交互式、渲染和清晰的图形。
如果屏幕上显示的元素不多，SVG真的是最好的选择。如果开发人员想向他们的客户展示一个良好且高性能的“hair-ball graph”，那么你可以在 yFiles for HTML 中包含 WebGL。
即使现在我们已经把它放在堆栈中了，我们仍然建议不要尝试显示这种数万大小的网络和图表，因为这种图主要是从艺术的角度来看的。有时简单地将元素的数量打印为字符串会提供比图片更多的信息。通常我们建议应用过滤技术，以减少图中元素的数量，理想情况下，屏幕上应该只有几十种元素，因为这是一般人脑最适合使用的元素。