SVG versus Canvas rendering selection

SVG and Canvas are two common graphics rendering technologies widely used in ECharts. Each has its own advantages and disadvantages, making them suitable for different scenarios. Understanding their differences and applicability can help developers better choose rendering methods, optimize chart performance, and enhance user experience.

Basic Concepts of SVG and Canvas

SVG (Scalable Vector Graphics) is an XML-based vector graphics format that describes graphics through DOM nodes. Canvas, on the other hand, is a bitmap technology that manipulates pixels directly via JavaScript APIs. ECharts defaults to Canvas rendering but also supports SVG rendering mode.

// Specify the renderer during ECharts initialization
const chart = echarts.init(container, null, {
  renderer: 'svg' // or 'canvas'
});

Performance Comparison

Impact of Element Count

Canvas performs better when rendering a large number of graphical elements. For example, drawing 100,000 scatter points:

series: [{
  type: 'scatter',
  data: new Array(100000).fill(0).map(() => [
    Math.random() * 100,
    Math.random() * 100
  ])
}]

SVG creates 100,000 DOM nodes, leading to severe performance issues, while Canvas requires only a single draw call.

Dynamic Update Efficiency

Canvas performs better in scenarios with frequent updates:

// Example of real-time data updates
setInterval(() => {
  chart.setOption({
    series: [{
      data: getNewData()
    }]
  });
}, 100);

Canvas only needs to redraw the affected area, whereas SVG requires DOM tree manipulation.

Feature Comparison

Interaction Capabilities

SVG supports native DOM events:

chart.on('click', { seriesType: 'line' }, (params) => {
  console.log(params.dataIndex);
});

Canvas relies on ECharts' encapsulated event system for interaction.

Style Control

SVG allows direct style modification via CSS:

/* Modify the line color in SVG rendering */
.echarts-line path {
  stroke: red !important;
}

Canvas styles must be hardcoded in JavaScript.

Mobile Adaptation

Resolution Adaptation

SVG, as a vector graphic, automatically adapts to various resolutions. Canvas requires manual handling on high-DPI devices:

init(dom, null, {
  devicePixelRatio: window.devicePixelRatio > 1 ? 2 : 1
});

Memory Usage

SVG has higher memory usage for complex charts. Canvas generally performs better on mobile, especially with WebGL rendering:

series: [{
  type: 'lines',
  coordinateSystem: 'geo',
  large: true,
  effect: {
    show: true
  }
}]

Hybrid Rendering Strategy

ECharts supports mixing both technologies:

// Use Canvas for the main chart and SVG for tooltips
tooltip: {
  renderMode: 'svg'
}
series: [{
  renderMode: 'canvas'
}]

Debugging and Optimization

SVG Debugging Tips

Inspect SVG nodes directly via browser developer tools:

document.querySelector('.echarts-svg path').getTotalLength();

Canvas Performance Optimization

Enable progressive rendering to avoid lag:

animationThreshold: 2000,
progressiveThreshold: 3000,
progressive: 200

Browser Compatibility

SVG supports full features in IE9+, while Canvas basic functionality is available in IE9+ but WebGL requires IE11+. Special scenarios may require polyfills:

// Check WebGL support
if (!echarts.getInstanceByDom(dom).getZr().painter.isSSR) {
  console.log('Current environment supports Canvas');
}

Matching Visualization Needs

Scenarios Suitable for SVG

• Static charts requiring CSS style control
• Scenarios requiring vector graphic exports
• Medium-complexity charts with fewer than 1,000 elements

Scenarios Suitable for Canvas

• Real-time visualization of large datasets
• Dynamic charts with high-frequency interactions
• 3D charts requiring WebGL acceleration

Advanced Feature Support

SVG-Specific Features

// Use SVG filter effects
series: [{
  type: 'line',
  itemStyle: {
    opacity: 0.8
  }
}]

Canvas-Specific Features

// Use Canvas blend modes
series: [{
  blendMode: 'lighter'
}]