Comparing HTML5 Canvas vs. SVG for Charting

SVG and Canvas are data visualization technologies that can be used to build financial charts without the use of outdated technology, such as Flash and Silverlight, which take a heavy toll on download speed, battery life and system resources. (1)

In the development of our own new Charting Library we evaluated SVG vs Canvas charts to determine which technology would allow us to meet the needs of our clients easiest. We wanted to create a high powered financial charting library that could accommodate a wide range of use cases, be seamlessly integrated across platforms, and would allow developers to spend more time on what matters most - creating and developing innovative products. Here’s what we found...

SVG, which stands for Scalable Vector Graphics, is an XML-based graphic format with the ability to infinitely scale without losing the image quality. (2) SVG has a Document Object Model (DOM) , which is an object-oriented representation of the web page. Basically, the DOM represents the document as nodes and objects so programming languages can connect to the page and easily make changes to the structure, style and content. (3)

Canvas is a pixel based element in HTML. Essentially, it is a tag that creates a blank surface for drawing. JavaScript is needed to actually draw and manipulate the graphics. Canvas uses a “fire and forget” model, there is no DOM that can be referenced once an element has been drawn. (4)

At first glance, SVG seems like a strong contender. However, after digging a little deeper into actual use cases, it’s clear that Canvas outperforms SVG.

For example, if you’re building a stock chart with 3 years of end-of-day data for Apple, it’s possible to create this with both SVG and Canvas. However, if you wanted to expand this chart to include historical data for Apple dating back to its IPO your SVG charting would grind to a halt.

In the chart below, provided by LogRocket, you can see for an extremely small amount of objects, the difference in render times between SVG and Canvas is minimal, however, as you increase the number of objects the difference becomes clear.

Initially, having every element available in the DOM seemed beneficial, however the browser is constantly re-computing every element which leads to a severe slow down.(6) Since Canvas doesn’t have the memory of every element that SVG has, it’s quick and easy to draw thousands of data points. (7)

For relatively small amounts of data, SVG charting may be sufficient, however real-time financial charting and in-depth historical data analysis can require thousands of data points. When it comes to powering your software with a charting library, it is evident that Canvas outperforms SVG.

Barchart’s financial charting library is a high-performance, fully HTML5 compliant solution that utilizes Canvas charting. It works with the data you already have or can be powered by any data within the Barchart ecosystem. Packaged seamlessly into a Digital Solution to power customer facing applications with dynamic data, tools, and market intelligence, you can drive user engagement to your products using as little as three lines of code.

Additionally this best-in-class Charting Library is utilized within Barchart’s flagship commodity trading platform cmdtyView®. cmdtyView was built for and tested by institutional grade users and gives the ability to create interactive charting, analyze global exchange data and physical commodity prices, execute futures trading, view advanced analytics, and more, all in one place.

You can demo Barchart’s interactive Charting Library here.

References

[1] https://www.freecodecamp.org/news/these-are-the-best-javascript-chart-libraries-for-2019-29782f5e1dc2/

[2] https://developer.mozilla.org/en-US/docs/Web/SVG

[3] https://www.htmlgoodies.com/html5/client/drawing-in-html5-using-the-canvas-element.html

[4] https://www.w3schools.com/html/html5_canvas.asp

[5] https://developers.google.com/web/tools/lighthouse/audits/dom-size