4 ms·

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

Canvas is significantly faster for animation: http://www.themaninblue.com/writing/perspective/2010/03/22/ 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.

arethuza 16y ago
What makes you say that? SVG is pretty much standard drawing primitives wrapped in a XML-based syntax.
- steadicat 16y ago
  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-flash http://www.slideshare.net/madrobby/i-cant-believe-its-not-fl...
  - arethuza 16y ago
    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.
nimrody 16y ago
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?
chairface 16y ago
There's already an implementation of hardware accelerated SVG, in IE9: http://blogs.msdn.com/ie/archive/2010/04/07/a-closer-look-at-internet-explorer-9-hardware-acceleration-through-flying-images.aspx 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.

arethuza 16y ago

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

steadicat 16y ago
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-flash http://www.slideshare.net/madrobby/i-cant-believe-its-not-fl...
- arethuza 16y ago
  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.

nimrody 16y ago

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?

chairface 16y ago

There's already an implementation of hardware accelerated SVG, in IE9: http://blogs.msdn.com/ie/archive/2010/04/07/a-closer-look-at-internet-explorer-9-hardware-acceleration-through-flying-images.aspx 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.