原文: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。
即使现在我们已经把它放在堆栈中了,我们仍然建议不要尝试显示这种数万大小的网络和图表,因为这种图主要是从艺术的角度来看的。有时简单地将元素的数量打印为字符串会提供比图片更多的信息。通常我们建议应用过滤技术,以减少图中元素的数量,理想情况下,屏幕上应该只有几十种元素,因为这是一般人脑最适合使用的元素。