4 ms·

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...

by axod 17y ago

windsurfer 17y ago
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.
- llimllib 17y ago
  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.
steadicat 17y ago
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 17y ago
  What makes you say that? SVG is pretty much standard drawing primitives wrapped in a XML-based syntax.
  - steadicat 17y 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 17y 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 17y 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 17y 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 17y ago
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.
- steadicat 17y ago
  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.

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...

by axod 17y ago

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...

windsurfer 17y ago

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.

llimllib 17y ago
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.

steadicat 17y ago

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 17y ago
What makes you say that? SVG is pretty much standard drawing primitives wrapped in a XML-based syntax.
- steadicat 17y 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 17y 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 17y 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 17y 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 17y ago

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.

steadicat 17y ago
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.