Canvas * Bitmapped graphics * Immediate mode + Fast for simple things + Minimal drawing overhead - Interactivity has to be handled

Canvas * Bitmapped graphics * Immediate mode + Fast for simple things + Minimal drawing overhead - Interactivity has to be handled manually (e.g. by checking whether click coordinates coincide with a drawn button) - Animating things (usually) mean redrawing most of the canvas for every frame + Ability to manipulate pixels if needed * Everything is drawn manually SVG * Vector graphics * Retained mode + Fast for simple things - Everything that needs to be drawn has to exist in the DOM + Interactivity can be handled via events by the browser on every element if needed + Animating things (usually) just mean to manipulate that thing in the DOM - Limited ways of arbitrarily manipulating the composed result * Everything is drawn by the browser + CSS support + Sophisticated text rendering support It's mostly a trade-off of what you want to do. The things marked with * above are not clear benefits or drawbacks. For a chart that consists of axes, ticks, a plot and maybe a few other things I'd always go for SVG unless compatibility constraints force me to go to bitmap graphics. It just maps much better to vectors than to pixels, but there are limits, of course. Heatmaps often are better drawn via canvas, especially those where there are no discrete shapes but rather blurry blobs of colour. Performance is a difficult topic and hard to compare, beyond simple things: In canvas (mostly) your only option of optimisation is to draw less, i.e. touch fewer pixels; with SVG being rendered and composited by the browser it often boils down to »don't move elements that don't have to move« to enable the browser to render less and not throw away every partially composited texture. In IE and Chrome SVG has quite great performance, in Firefox you have to be careful what you do. Uusally it scales well to a few hundred or thousand DOM elements, though, depending on what you do.