Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

Assuming you don't care about IE, what's the Pros/Cons for SVG vs Canvas? Canvas seems to be pretty nice from what I've used it for so far...


Canvas is significantly faster for animation: http://www.themaninblue.com/writing/perspective/2010/03/22/

It is also more likely to get faster in the future, as browsers might implement GPU acceleration for it. I wouldn't hold my breath waiting for GPU acceleration for SVG, since SVG is not as easily mapped to drawing primitives, like Canvas is.


There's already an implementation of hardware accelerated SVG, in IE9: http://blogs.msdn.com/ie/archive/2010/04/07/a-closer-look-at...

There's also a toggle in Firefox's about:config that turns on hardware acceleration on Windows.


What about printing? Does canvas maintain resolution independence like SVG? ... I.e., can you print your beautifully drawn graphs and expect to get quality output?


What makes you say that? SVG is pretty much standard drawing primitives wrapped in a XML-based syntax.


Not exactly. SVG syntax describes a scene, it does not draw on screen directly.

When you animate an SVG image, you update the DOM. The browser then needs to parse the DOM (attributes) again, then clear the screen and draw each element again. This is a lot more work than just mapping the drawing primitives of Canvas to the lower-level GPU functions.

Check this presentation for the two technologies compared in terms of how much work is required for animation: http://www.slideshare.net/madrobby/i-cant-believe-its-not-fl...


Ah OK - good point

I guess it's good to have the choice though - for some things Canvas looks a good choice, for others SVG is better.


Canvas is pixel oriented whereas with SVG you have a hierarchical document structure to work with.

So if you want to do an online image editor I'd probably go with canvas. For something that needs multiple objects with their own individual event handling - SVG looks a lot easier to me.


SVG is easier out of the box, but you can also use a "scene graph" JavaScript library to create an object abstraction on top of Canvas. In my experience managing the scene graph in JS turns out to be much faster than letting the browser handle it with SVG.


SVG is better supported and has some content creation tools already such as Illustrator and Inkscape. Also: SVG stuff can be used on IE (aparently...) via a flash conversion tool.


canvas is simpler, with more complete support, and tends to be faster. SVG is a huge spec, while canvas' can be read in a sitting.




Consider applying for YC's Fall 2025 batch! Applications are open till Aug 4

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: