Hacker News Reader

SVG is a good solution too, but it can really suffer performance-wise, especially on mobile, tablet and when animating svg node positions.

View on HN

Canvas is bitmap-based, while SVG is vector. If you need to print the chart SVG is going to look a lot better. Also, if you pinch-zoom the chart, SVG is going to look better. Canvas doesn't support animation -- you have to code it yourself. SVG performance is quite good unless you have thousands of elements, which a chart isn't going to have.

> Canvas doesn't support animation -- you have to code it yourself.

What do you mean?

The obvious. That canvas is just a set of pixels with colors (a bitmap image). To get animation, you have to explicitly change them every X milliseconds.

Whereas SVG has actual objects, that you can apply items like animateTransform, animateMotion etc to them directly, in a declarative style.

Ok, thanks. I didn't know that. I thought you had to clear/redraw the SVG for animation as well.

Have you done any benchmarking of canvas vs svg charts?

I did a while back for my university dissertation, I'll have to see if I can dig it out.

IIRC: canvas tends to outperform svg when dealing with a lot of individual objects, due to them being individual dom nodes in svg. However svg will outperform canvas drawing fewer nodes, on a larger canvas, due to canvas being bitmap based.

Reply on news.ycombinator.com