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?
The short answer is: both of them have their use.
SVG is a
Retained mode graphics
[1] therefore it is very easy and recommended for interactivity (like click events and all mouse events, because the event binds directly to the element in the DOM), it is great for maps etc.
But it is not recommended for heavy animations since the DOM is generally slow.
SVG is also not recommended for large data driven charts since it needs to do a lot of DOM manipulation.
Additionally with the raphaeljs [2] library, should simplify your work with SVG
canvas is immediate-mode graphic and 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 resources
here (sitepoint.com)
[3]
SVG and Canvas (Mozilla)
[4]
Also see a detailed video: http://vimeo.com/6691519
Additionally is a very powerful library called processing.js [5]
[1] http://www.google.com/url?sa=t&source=web&cd=1&ved=0CBIQFjAA&url=http%3A%2F%2Fen.wikipedia.org%2Fwiki%2FRetained_mode&ei=Q28zTLnxGcP98Ab13OzICw&usg=AFQjCNF66JXTC4ZUUEyf4RblV-IKm3Q8Dg&sig2=fE_zLV1nwt5LuAJpH8hbFwI 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/
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 [1]. I've also used excanvas [2], which used to work with IE also. SitePont also had a post [3] recently about the Lively Kernel [4], 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 [5], 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 [6].
[1] http://intertwingly.net/blog/2007/09/11/SVG-on-IE-via-Silverlight-RevisitedMy 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.
I would add that SVG is not supported on Android, and there is no plan to support it in the future. Depending on your target platforms this may influence the decision.
I've had good experiences with the Raphael JS [1] framework, which uses SVG. I can't really comment on canvas, I'm afraid.
[1] http://raphaeljs.com/One cool thing about SVG is you can use inline SVG [1]. 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.
[1] http://wiki.svg.org/index.php?title=Inline%5FSVGSVG 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 best JS library I know of currently which is built on top of SVG is Raphael [1], which allows you to draw SVG graphics, but automatically switches to VML for older versions of IE. Even better, on top of Raphael is gRaphael [2], which is a very powerful graphing library.
The only major desktop browser that doesn't support SVG is older versions of IE. IE9 does support it, but older versions (IE6/7/8) support VML instead. But as I said, Raphael will use either SVG or VML as required, so if you write your code with Raphael, you don't need to worry about the browser at all. But in case you're planning on writing the SVG code directly, 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/. There are also a few other similar libraries around too.
However, in the world of Mobile browsers it's a completely different story, because at the moment SVG is not supported at all by the Android browser, and there is no fall-back solution either. This is unfortunate, as it's a big gap in support for a technology that is otherwise pretty universal. No doubt it'll be added eventually, but in the meanwhile, if you need to support mobile browsers, SVG is pretty much off the table, so you'll have to use Canvas.
[1] http://raphaeljs.com/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.)
Google maps is SVG and VML... I don't think it will be "putting down"...
You never know... XHTML vs HTML5...
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.
AFAIK, SVG has nothing to do with the (X)HTML standards, while <canvas>
is
included in the HTML5 specification draft
[1]. So, canvas might be more future proof.
As a curiosity, check out what Mozilla Labs did with canvas; Bespin [2].
[1] http://dev.w3.org/html5/spec/Overview.html#the-canvas-element<canvas>
are being included in HTML5 w3.org/TR/html5/the-canvas-element.html#svg-0 , though there is still work to be done on how to integrate SVG into the HTML syntax (since SVG is based on XML, which supports namespaces, while HTML does not). If you use XHTML (with the appropriate Content-type: application/xhtml+xml
), you can mix SVG and HTML together today (in browsers which support it); or if you build the DOM yourself, you can do it in an HTML document as well. - Brian Campbell