share
Stack OverflowSVG vs CANVAS, where is the Web World going towards?
[+124] [13] Itay Moav -Malimovka
[2009-02-20 03:10:51]
[ javascript canvas svg ]
[ http://stackoverflow.com/questions/568136/svg-vs-canvas-where-is-the-web-world-going-towards ] [DELETED]

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?

(4) What kinds of things are you doing with it? Creating interactive and/or scalable objects, or just drawing static charts and stuff? - Kev
(1) Imagine a huge GO board, with many kinds of units and many users. All on-line and requires only the browser. - Itay Moav -Malimovka
GO is awesome game. :) Can you give link to this site? - topright gamedev
like GO, and not yet (should I start use twitter |thinking to myself| ) - Itay Moav -Malimovka
Why the down-votes? - Itay Moav -Malimovka
@Itay You've only received one downvote out of 45 total votes, so you may as well assume it's noise. - Adam Davis
@Adam Davis u probably right - Itay Moav -Malimovka
[+95] [2010-07-06 18:34:27] adardesign

The short answer is: both of them have their use.

SVG

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

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

Additional resources

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_zLV1nwt5LuAJpH8hbFw
[2] http://raphaeljs.com/
[3] http://www.sitepoint.com/canvas-vs-svg-how-to-choose/
[4] http://people.mozilla.com/~vladimir/xtech2006/
[5] http://processingjs.org/

(1) Why do you think SVG is "difficult for data driven charts"? Could you explain in more detail? Thanks. - btel
(3) As i said, it needs to do a lot of DOM manipulation's and then each time your crossing the bridge to the DOM it is expensive. Vs Canvas which draws it it all over again and returns it. - adardesign
(4) Its impossible to squeeze performance in svg, I've been writing svg based drawing tool to learn a bit. Works great on desktop, but has a sad performance on my iPod touch, both 3g and 4g :/ (I'm getting js timeout exceptions) I'm in favour of svg, but its performance on handhelds is stopping me from making a choice. Would probably go for a mix of both, where interactivity is done by canvas, vector rendering done by svg once user finalizes things. - Abhishek Mishra
(1) @Abhishek, sounds like a good mix "interactivity is done by canvas, vector rendering done by svg once user finalizes things." thanks - adardesign
1
[+34] [2009-03-10 19:30:27] Robotsu [ACCEPTED]

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/


(2) Interner Explorer 9 will support SVG 1.1. The preview is already out. blogs.msdn.com/ie/archive/2010/03/18/svg-in-ie9-roadmap.aspx - lenkite
(35) I do not know much about the canvas, but if it is raster-based (and not vector based, as SVG), then this is a MAJOR difference. So the statement "You're able to achieve the same types of operations with either technology" doesn't feel right then. Of course, if we live in a world where no one would ever try to zoom or rescale or even edit an image, and if we accept that you can insert raster images inside a SVG vector image, then, maybe they are similar... Or are the pixels of the Canvas computed at display-time? Then it is vector-like, and I am just full of shit. - Andreas Rejbrand
I have worked with canvas and it is quite powerful so I would agree go with canvas. @Andreas I believe that if you draw something in canvas it will scale like SVG. I'm not sure if it is raster or vector though. - qw3n
(1) qw3n: Canvas is just a fixed-size bitmap that you can draw to. If its size ever changes it gets cleared, and you have to redraw everything. If your drawing commands take the canvas's size into account, it can scale of course, but you have to do it manually. - Gabe
(1) It sounds like SVG is a true, vector image file format, whereas canvas is not a file-format in its own right. So I will stick to SVG. KISS, no scripts and stuff. - Andreas Rejbrand
What i do is create layers of canvases. That way i only have to update a small set of things each time, instead of redrawing the whole image. - Tor Valamo
(8) I would go with SVG. Remember Canvas isn't directly supported in IE until IE9 which is the same time SVG will be. So there is no real difference between them in terms of support. Furthermore, SVG allows you to separate the drawing aspects into your document where with Canvas you have to draw in code! That's a huge difference in productivity. Code is great for defining behavior not layout. SVG is better for defining layout. In some ways Canvas is a lower-level tech than SVG. - chubbsondubs
Also elements added to SVG are exposed to the DOM, so event handlers can be add... as far as I understand, this isn't true for Canvas. - Peter Ajtai
Although faster at rendering 2D graphics, Canvas does not allow to setup DOM events, making it much slower than SVG to render interactive dynamic graphics especially on slower mobile device processors. Zooming graphics with canvas also renders poorly because the actual result is raster graphics which loose the vector "intelligence" as soon as rendered. - Jean Vincent
FYI bespin has been binned and the thing that it has been merged into does not use canvas or SVG, but plain JS + DOM. - Spycho
@chubbard SVG is also unsupported in IE<9, so you are sort of at a draw with canvas and SVG support in IE. - user29439
Canvas relies on javascript, and not all mobile browsers (namely opera mini) run javascript. As for SEO and accessibility, canvas alternate content supports content structure markup (headings, lists, emphasis...) while svg supports drawing markup (shapes, animation and simple text). - facildelembrar
This is truly a bad answer to pick as "correct". Canvas and SVG serve fairly different purposes and each one could be considered "best" depending on a number of considerations. The higher voted community wiki answer is a far better answer than this one, albeit it could be improved as well. - James
2
[+26] [2009-02-21 23:14:06] user29439

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-Revisited
[2] http://code.google.com/p/explorercanvas/
[3] http://www.sitepoint.com/blogs/2008/12/22/svg-is-the-future-of-application-development/
[4] http://research.sun.com/projects/lively/
[5] http://www.inkscape.org/
[6] http://streaming.ndc2010.no/tcs/?id=163E9CCC-7317-41A5-B772-81595467BBAF

Lively Kernel looks great :) I wasn't able to use it though, it made firefox freeze. - the_drow
3
[+12] [2010-01-05 01:56:07] Evgeny

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.


IMHO this is the best answer, especially with the very good link to svgopen.org/2009/papers/… - Jean Vincent
4
[+9] [2010-02-01 15:09:53] codedread

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.


5
[+9] [2010-11-14 20:56:52] Noam

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.


(2) Now it apparently does: googlesystem.blogspot.com/2011/02/… - facildelembrar
6
[+8] [2009-02-21 23:06:54] John McCollum

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/

(1) Wow. That's an amazing library! - Clinton Blackmore
7
[+5] [2009-08-11 06:49:32] onsaito

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

  • Firefox
  • Opera
  • Camino
  • (Chrome)

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%5FSVG

Great Link. Very Helpful. Thanks :) - Crimson
8
[+4] [2010-09-07 16:17:07] Spudley

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 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/
[2] http://g.raphaeljs.com/

9
[+1] [2009-02-21 23:25:44] Georg Schölly

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


Why did someone downvote? Please leave a comment when you downvote. - the_drow
(3) I didn't downvote, but I'd have said the opposite: SVG is easier to make interactive since you can deal with elements and easily handle events, while Canvas is just a bitmap, much more like an image. - MSpreij
(1) @MSPreij: You are right, it's easier to implement basic interactive elements in SVG, but don't try anything complex for which it's easier to use a canvas element. If you haven't seen it yet, watch this introduction to canvas and svg: youtube.com/watch?v=siOHh0uzcuY&hl=de - Georg Schölly
10
[+1] [2010-07-06 16:32:58] James

Google maps is SVG and VML... I don't think it will be "putting down"...

You never know... XHTML vs HTML5...


11
[0] [2010-09-07 16:08:24] thSoft

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.


12
[-2] [2009-02-21 23:11:02] Henrik Paul

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
[2] https://bespin.mozilla.com/

tnx, I am familiar with Bespin. - Itay Moav -Malimovka
(3) SVG is a W3C standard too. - PhiLho
SVG is a W3C standard-yes. But it's a separate standard from any HTML dialect. There's no <SVG>-tag (or equiv). - Henrik Paul
Yes there is. w3.org/TR/XHTMLplusMathMLplusSVG - flussence
Technically, Henrik is correct. However, you can embed additional markup types in XHTML (e.g. SVG, XForms, etc). - user29439
(3) Actually svg is explicitly mentioned in the html5 spec dev.w3.org/html5/spec/Overview.html#svg-0 and canvas actually came from apple, although the w3c seem to have taken ownership. - iasksillyquestions
(5) Both SVG and <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
SVG is fully part of W3C standard and is even integrated with the DOM where Canvas is not. As far as the future is concerned, SVG will now have the support of IE9 after many years of VML support. So if VML is on its way out, SVG is very much growing in popularity. - Jean Vincent
FYI bespin has been binned and the thing that it has been merged into does not use canvas or SVG, but plain JS + DOM. - Spycho
13