选择 Canvas 还是 SVG

    Canvas 提供的绘图能力更底层,适合做到像素级的图形处理,能动态渲染和绘制大数据量的图形。而 SVG 抽象层次更高,声明描述式的接口功能更丰富,内置了大量的图形、滤镜和动画等,方便进行文档元素的维护,也能导出为文件脱离浏览器环境使用。

    下图从通用层面描述不同渲染技术各自适合的场景。

    Canvas vs SVG: pref

    而且在小数据量的情况下,SVG 的方案通常内存占用会更小,做缩放、平移等操作的时候往往帧率也更高。

    比较流行的看法是 SVG 做定制和交互更有优势,因为有类似 DOM 的结构,能快速应用浏览器底层的鼠标事件、CSS 样式、CSS3 动画等。不过基于 Canvas 做上层封装后也能实现类似的定制和交互,并且自由度更高。

    从 版本开始,G2 正式支持 Chart 级别切换 SVG 渲染。目前默认使用 Canvas 渲染,使用 SVG 版本可以给 Chart 实例指定 renderer 为 svg 如下:

    目前 所有图表 都支持了两种渲染引擎,并且同一个页面也可以混用两种渲染引擎,可以放心使用。