Canvas and SVG are two major browser-based rendering schemes, and users sometimes struggle between them when choosing a chart library. But when you’re struggling, do you really know what the pros and cons are?

ECharts 4.0 introduces a Canvas/SVG dual-engine rendering solution that allows users to switch with a single configuration item, making it the first dual-engine visualization tool that we know of. The same interface, the same rendering visual effect, not the same wonderful!

So, what kind of scenarios are Canvas and SVG respectively suitable for? This paper will introduce in detail the rendering performance that we provide for testing various platforms, various data volumes, various chart types and other dimensions, and give recommendations for different scenarios.


First, the big picture of the conclusion

In the figure, green means SVG is recommended, red means Canvas is recommended, more arrow ↑ means stronger recommendation, “-” means there is little difference between the two, or there are different choices according to different situations.

How should we read the picture above? In a real use scenario, it is possible to draw opposite conclusions for multiple dimensions of the same graph (for example, SVG ↑ if there are many graphs, but Canvas ↑ if there is also a large amount of data). At this time, on the one hand, the number of reference arrows determines which has a greater impact. On the other hand, if performance requirements are really high, you can refer to this conclusion to conduct more detailed tests.

Because the properties of the chart itself and the variability of the presentation platform can be very rich, it is difficult to draw conclusions directly based on a single dimension. What this article can do is to tell you some of the more definitive conclusions as far as possible (such as mobile platform preferred SVG), as an official point to a relatively clear direction. In the actual use process, users can further test and improve if they encounter performance bottlenecks.

It is also important to note that the conclusions of this article are based on implementation tests for ECharts version 4.0, and implementations of different visualization tools may not be completely compatible. Later performance optimizations may also result in other changes.

Below, we illustrate some important conclusions.


SVG is preferred for mobile platforms

On the mobile end (especially low-end Android), Canvas can perform very poorly due to memory and CPU resource limitations, while SVG has a big advantage in comparison.

On Samsung Note 3 and Redmi 1S we tested, a line chart containing 10 data points, and the initial animation FPS rendered by Canvas were 20 and 5 respectively. With SVG, 44 and 20 can be achieved. The difference is very noticeable.

SVG also often outperforms Canvas on iOS, but the advantage is less significant because iOS is better configured. For example, on the iPhone 7 we tested, a line chart with 10 data points was rendered at 60 FPS in BOTH SVG and Canvas. The difference only becomes apparent when the data volume reaches 1000, with SVG and Canvas at 60 and 32 FPS respectively.

Therefore, we strongly recommend that SVG be preferred for rendering on mobile platforms.


SVG is preferred when there are many diagrams

When there are a lot of charts, the amount of memory used makes a big difference in the experience of whether the page is stuck or not. In this case, SVG has a very clear advantage.

“A lot of charts” relative to the computer terminal generally need more than ten charts, relative to the mobile phone terminal is a single digit will reflect the difference. For the extreme case where the number of charts reaches 100, the memory usage of Canvas can reach more than ten times that of SVG.

When you feel the scrolling screen is stuck, it may be because of the memory footprint, so consider using SVG for rendering.

Use SVG when exporting small files in high definition

SVG rendering exports SVG files that are smaller, but keep the vectors infinitely sharp and enlarged. We often get feedback from users that we need to insert charts into PDF, and if we insert SVG, it will not only make the images clearer, but also make the PDF smaller.

It is also possible for designers to use exported SVG for secondary editing.


Some special render effects are only supported by Canvas

SVG supports most of the features, except for some special renderings that may rely on Canvas: dazzling wake effects, thermal maps with blending effects, etc. In addition, rich text and materials are not yet available in the current VERSION of SVG.

Dazzle wake effect:

Thermal map with mixed effect:


Canvas rendering is recommended for a large amount of data

Canvas rendering is recommended for a large amount of data (>1000) and frequent interaction with a large number of graphics. Better performance can be achieved with the use of progressive rendering introduced in ECharts 4.0.


How to specify Canvas or SVG rendering

ECharts uses Canvas rendering by default. If you want to use SVG rendering, the ECharts code must include an SVG renderer module.

  • The SVG renderer is already included in the common and full versions of the ECharts pre-build file, and can be used directly. The lite version does not.
  • If you are customizing ECharts online, check “SVG Rendering” at the bottom of the page.
  • If you build ECharts custom offline, you must introduce the SVG renderer module, i.e. :
import 'zrender/lib/svg/svg';
Copy the code

We can then initialize the diagram instance in code by passing in the argument to select the renderer type:

// Use Canvas renderer (default) var chart = echarts.init(containerDom, null, {renderer:'canvas'}); Var chart = echarts.init(containerDom); Var chart = echarts.init(containerDom, null, {renderer:'svg'}); 
Copy the code

Isn’t that easy? Go ahead and use it