I need to pick one of two technologies (svg, canvas) for an ongoing project of mine. I would prefer to pick the technology that is more maintained and in active development rather then choose a technology marked for "putting down".
Which of the two should I choose?
Is there a good JS library built on top of them?
I've had good experiences with the Raphael JS framework, which uses SVG. I can't really comment on canvas, I'm afraid.
you've ruled out Flex/Flash (and Silverlight) ? These may be better choices depending on your target and time frame.
AFAIK, SVG has nothing to do with the (X)HTML standards, while <canvas> is included in the HTML5 specification draft. So, canvas might be more future proof.
As a curiosity, check out what Mozilla Labs did with canvas; Bespin.
The Raphael JavaScript framework John mentioned is the best I've come across. You could also use pure SVG and display it in IE using XSLT, as described by Sam Ruby. I've also used excanvas, which used to work with IE also. SitePont also had a post recently about the Lively Kernel, which uses SVG and JavaScript. Very cool, and I'm curious to see how that develops.
I prefer the SVG markup and tools (Illustrator, Inkscape, etc), as well as the ability to use the markup over the JavaScript code. Theoretically, you could use SVG with XForms or XHTML to create entire UI's, much like MXML or Silverlight's XAML, or even use XSLT to translate between different platforms. HTML5, while the likely successor to HTML4, is still not a full standard and no one knows for sure whether or not IE will ever have the canvas element.
Update
As I've learned more about HTML5 and the role of SVG and Canvas, I would suggest you use both. They each have strengths and can work together nicely. For a great example, see Remy Sharp's talk from NDC 2010.
Those two are both going to be supported, because they have different purposes.
<canvas> is meant as a replacement for Flash and the like, to let you create rich applications.
SVG instead is another image format, which should be used like an image and have only basic interaction and movements.
So it really depends on what you want to accomplish. It's not hard to think of cases where both are used alongside in a website. (SVG for the logo / a picture gallery and <canvas> for a fancy voting element / game.)
I would personally recommend for you to choose Canvas. You are always able to get cross-browser support with exCanvas. SVG is a fine technology but in terms of who has the hot hand, Canvas is currently getting a lot of momentum building up with the HTML5 adoption underway in several A-grade, modern web browsers.
Another thing you may want to consider are the types of operations you will be doing with your technology of choice. VML and SVG are both vector-based, while canvas is a bitmapped system. This can translate differently in terms of scaling and performance.
Here are some articles comparing SVG and canvas drawing:
http://www.ernestdelgado.com/gmaps/canvas/ddemo1.html
http://www.borismus.com/canvas-vs-svg-performance/
All in all in just depends on what you are comfortable with and how you are using SVG or canvas. You're able to achieve the same types of operations with either technology, but at this point there are so many exciting things happening with canvas it's hard to ignore: https://bespin.mozilla.com/
One cool thing about SVG is you can use inline SVG. That is you can treat SVG elements as if they are XHTML elements and be able to manipulate them with JavaScript and CSS.
They are supported by
And it seems that you can make it work even with IE according to Sam Ruby web site mentioned above. (I'm a new user and post a maximum of one hyperlink.)
Note: One problem I had in the past with <canvas> element was to render text. (I used canvas in 2008.) Firefox added this capability, and it'll be added to HTML5. So, it'll be irrelevant in a future, but you may want to check if your target web browsers support this.
My guess is both svg and canvas will stay since vector and raster graphics have their own niches. Also svg allows easier way to handle events, since elements are part of svg dom.
These articles I found on the web do a good job comparing svg and canvas
http://people.mozilla.com/~vladimir/xtech2006/
http://www.svgopen.org/2009/papers/54-SVG_vs_Canvas_on_Trivial_Drawing_Application/
and the last one shows a method to combine the two.
also it might be iteresting to see who sponsored 2009 SVG conference: http://www.svgopen.org/2009/
I think the map rendering test cited by @Robostu is rather limited since it does not involve event handling where for example a single polygon would need to be moved.
Wow - lots of interesting opinions on here. Especially the ones that flat-out recommend a technology without knowing what the use will be.
I suggest you read this: http://ajaxian.com/archives/todataurl-canvas-and-svg
SVG and Canvas both have uses on the web and it depends on what your application needs. Both are limited in the sense that you need a shim to run in IE8-. Let's see what IE9 has.
If you have need of a DOM, handling mouse events, serialization - then SVG might be the best choice.
If you don't need this, but need a fast way to render pixels - then Canvas might be the best choice.
Google maps is SVG and VML... I don't think it will be "putting down"...
You never know... XHTML vs HTML5...
The answer is: both of them have their use.
SVG is a retained mode graphics therefore it is very easy and recommended for interactivity (like click events and all mouse events), Its great for maps etc.
But not recommended for high animations.
Also difficult for data driven charts since it needs to do alot of DOM manipulation's.
canvas is not part of the DOM tree, therefore its not best for binding mouse events.
But is best for Pixel based drawings and especially for objects that are high in animation's
See a very clear and informative article here (sitepoint.com)
Also see a detailed video about this @: http://vimeo.com/6691519
SVG is clearly the way to go. You get scalability and declarative, semantic, model-based graphics instead of issuing procedural drawing commands in a loop.
SVG and Canvas are different technologies: SVG is for vector graphics; Canvas is for bitmaps.
Both have their place, and both are very good things to be learning. They're both quite new (particularly Canvas), so there aren't that many toolkits and libraries built for them yet. But you can be sure they're coming!
The only JS library I know of currently which is built on top of SVG is Raphael, which allows you to draw SVG graphics, but automatically switches to VML for older versions of IE. On top of Raphael is gRaphael, which is an SVG/VML graphing library, which is very powerful.
[EDIT]
For what it's worth, the only major browser that doesn't support SVG is IE. However, IE9 (currently in beta) does support it. Older versions of IE support VML instead (hence why Raphael supports SVG and VML), but you may be interested to know that Google have written a JS library to allow older versions of IE to support SVG: http://fuzzytolerance.info/code/google-builds-javascript-svg-library-for-ie/
