I’m also looking for speed. Speed in initial rendering is one thing, speed in updating is another. As you said in the post, fast updating in games like that space invaders example should be done in canvas. Once the initial parse and render of the SVG file is complete, you can cache the output and do very fast incremental updates. For example, an SVG file that takes say 200ms to load, parse, and render for the first time might take 25ms to update from the cache. This hugely benefits performance. Updating the DOM is not known to be fast, and is a pain in the backside anyway. This example gets the best of both worlds. You can design your application in a design program like Illustrator, which is much easier than hand coding it, and also reap the benefit of canvas’s fast updating speeds while not having to deal with the DOM, in a single solution.

@Nosredna: Is there any user interaction with what you are drawing? If there is, I would probably use SVG with lines and an image inside. If there isn’t, then it would make sense to use the Canvas tag and drawImage.

I have a project coming up where I’ll be drawing anti-aliased lines over an image. Which would be better for the task, Canvas or SVG? Can I just put a div up as an overlay and draw lines? Does Canvas support a transparent background for this kind of work?

It seems like “everybody” wants to solve this by writing a SVG parser for Canvas. SVG is however pretty complicated and for most(?) of the usecases just a bitmap export (like .toDataURL) is sufficient. SVG is already rendered in the browser, so it should be trivial to implement for browsers.

To make that SVG parser do more than toDataURL for SVG, you also need to implement a scene graph for Canvas (and that’s what SVG does natively). Even the most perfect (100% complete) SVG parser without SVGs SMIL animations, scene graph, etc. would be only as good as SVG.toDataURL()

And, SVG is for different things than what Canvas is good for. These technologies do not overlap, we really need both (and especially SVG!)

– Matti, co-author of that paper.

Best,
Brad

1. create an xhtml file with an inline svg (like descriibed here: http://wiki.svg.org/Inline_SVG) and save it as .xhtml file
2. encapsulate the svg-tag in a div-tag with id “svgcontainer”
3. use svgcontainer.innerHTML to get the contents of the div (which is the current svg structure!)
4. use the webkit native base64 encoder (window.btoa(svgcontainer.innerHTML)) to encode the svg as base64
5. add “data:image/svg+xml;base64,” to the start of the base64 string
6. create an img-element and assign the base64 svg dataurl as src
7. use canvas drawImage to draw the img into the canvas
8. now you have the rendered svg as editable pixel data in a canvas.

This will only work in webkit because FF does not support svg files as sources for img-tags.

If this is of general interest I can post are full example in my blog (www.bytestrom.eu)

http://blog.thejit.org/2009/08/30/html-svg-or-canvas-labels/

Devon