Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

SVG vs HTML5 Canvas Based Charts

I have to draw charts on browser using a python backend (which may not matter here). There are numerous libraries like JQPlot, D3, Google Charts for achieving this.

But if you classify them, they are either HTML5 Canvas based or SVG based. Both are important technologies in their own space. But

for charting as a subject, shall I go with SVG based libraries or  HTML5 Canvas based libraries. What are downside and benefits of  both approaches.  

I don't have any prior experience with charting and don't want to hit the wall after I start the project.

like image 846
Vivek Jha Avatar asked Jan 22 '15 07:01

Vivek Jha


People also ask

Is canvas better than SVG?

SVG gives better performance with smaller number of objects or larger surface. Canvas gives better performance with smaller surface or larger number of objects. SVG is vector based and composed of shapes. Canvas is raster based and composed of pixel.

What is the difference between SVG and HTML5 canvas?

Difference between SVG and HTML5 Canvas: Canvas has poor scalability. Hence it is not suitable for printing on higher resolution. SVG gives better performance with smaller number of objects or larger surface. Canvas gives better performance with smaller surface or larger number of objects.

What's the difference between SVG and Canvas?

Differences Between SVG and CanvasSVG is a language for describing 2D graphics in XML. Canvas draws 2D graphics, on the fly (with a JavaScript). SVG is XML based, which means that every element is available within the SVG DOM.

Is SVG slower than canvas?

SVG becomes slow rendering if it is complex because anything that uses the Document object model (DOM) at great extent will become slow. Canvas provides the high-performance element best suited for rendering faster graphics like image editing, an application that requires pixel manipulation.


1 Answers

Projects with a large amount of data may favor canvas. SVG approaches typically create a DOM node per point (unless you make paths), which can lead to:

  1. An explosion in the size of your DOM tree

  2. Performance problems

Using a path, you can get around this problem, but then you lose interactivity.

Say you're building a stock chart. If you are talking about a chart with, say... max 5 years and end of trade data samples only, I think the answer is clearly SVG. If you're talking about looking at Walmart's historical data from day one of trading or doing full trade information per minute, you are going to have to really look carefully at SVG. Probably will have to employ fancy memory management and a fetch-on-demand approach as SVG will fall apart, particularly if you go one sample to one SVG node.

If interactivity is a requirement, SVG easily has the edge, given:

  • It is a retained mode API
  • You can use typical event handlers
  • You can add/remove nodes easily, etc.

Of course, you see that if you require full interactivity, it may go against mechanisms that allow SVG to scale, like path collapsing, so there is an inherent tension here.

There is going to be a trade-off in extremes. If size is small, the answer is SVG hands-down. If size is large and no interactivity, the answer is SVG with path drawing only or using Canvas. If size is large and interactivity is required, you have to go canvas or tricky SVG, which is complex in either case.

Some libraries out there offer both canvas and SVG renders, such as ZingChart and Dojo. Others tend to stick with just one of the two options.

like image 117
Jailbot Avatar answered Oct 08 '22 01:10

Jailbot