Highcharts goes SVG

Posted on March 17, 2010 by Torstein Hønsi. Last modified on April 04, 2016.

Yesterday Microsoft announced IE9's support for SVG. Not only that, it draws muscle power from the graphic processor itself, allowing fast and smooth animation. This fits nicely into Highcharts' objective to become SVG driven.

Highcharts started out as SVG/VML experiments three years ago, but the SVG renderer was abandoned mainly due to Safari's lacking support. That has changed now. With yesterdays great news from Microsoft, all browser vendors do or will soon support SVG. It's a huge contribution to the fall of Flash. And a huge contribution to the rise of web standards based libraries such as Highcharts.

Highcharts is currently rendered using the HTML5 canvas element in supported browsers. Now that all browsers soon support SVG, are there any reasons left to use canvas over SVG? SVG has several advantages.

  • SVG is object oriented, which opens for animation and reuse of elements instead of the double buffering techniques currently used in Highcharts.
  • Memory usage will go down as all the canvas layers disappear.
  • The charts will appear razor sharp when zoomed, which is a common operation on mobile user agents.
  • In IE < 9 we can skip the excanvas abstraction as VML is more kin to SVG than canvas.
  • Finally, native animation is coming to SVG enabled browsers.

The single most frequently requested feature in Highcharts today is the ability to save an image of the chart. This is also a reason for converting to SVG. The main idea is to create an SVG representation of the chart on the client side, post it to the server, use ImageMagick or its likes to convert it to any image format and return it or do something else with it. We will offer a cloud service to do this on our servers, as well as server components for clients to install on their servers.

To generate the SVG in legacy IE, all we have to do is to switch from the default VML renderer to SVG, build the SVG in a hidden container and send it off to the server for conversion.

We have started rebuilding Highcharts to SVG as an experiment. See www.highcharts.com/demo/?prerelease=1.3. This URL sets a cookie to your browser to use the 1.3 prerelease. To unset it, click www.highcharts.com/demo/?prerelease=. Currently it works in Firefox and Opera. Safari has a problem with alpha transparency. The early IE9 preview doesn't render the text tspan elements, but that will change as the new browser is developed. Many features are not yet refactored, so you will experience JavaScript errors and missing features.

Is this the way to go forward with Highcharts? Please add your comments to this forum thread.