SVG vs Canvas for a "wind" chart

Question

I have come across this question, and I know there's no silver bullet, but I'm looking to make a chart along the lines of this NYTimes interactive

I see via the inspector that it's made using canvas. I wonder, was there a single compelling reason for this? Would the same chart + animation be performant in SVG? Or is the general rule that canvas should be used for animation this complex?

Answer 1

Yes, make it by <canvas>.

SVG vs canvas: how to choose:

• SVG: High Fidelity Complex Vector Documents for Viewing and Printing, Static Images
• <canvas>: Complex scenes and real time animations, High performance (filter, ray tracers), video manipulation.

Visit SVG vs canvas: how to choose for more details.

Answer 2

My personal experience basically adheres to the following:

Use SVG when there are shape elements (circles.rect,ellipse,paths, polygons) that rquire individual events attached(onclick,mouseover,etc.)

Use CANVAS when you can access pixels to present the graphic. The pixel control allows sophisticaed graphics not possible with SVG, and in many cases much more effvicient.

Just my input...

Answer 3

I don't know about performance, but there are various reasons why one might be chosen over another. Here's a page that gives you the run-down on the differences. This might explain their decision:

http://www.htmlgoodies.com/html5/other/html5-canvas-vs.-svg-choose-the-best-tool-for-the-job.html#fbid=uWFouE4ztEY

Of course, other factors come into play, such as data sources, etc... For instance, SVG seems tempting if you're getting a big chunk of data from the server, as you can format it as an XML and serve it up.

Also, the decision could be much more banal; it could simply be what they knew, had tools for, or the thing for which they could find documentation most quickly.

Sadly, not all software decisions are made on merit. Decisions are often much more opportunistic and rushed.