What is the difference between SVG and HTML5 Canvas?
There's a difference in what they are, and what they do for you.
- SVG is a document format for scalable vector graphics.
- Canvas is a javascript API for drawing vector graphics to a bitmap of a specific size.
To elaborate a bit, on format versus API:
With svg you can view, save and edit the file in many different tools. With canvas you just draw, and nothing is retained about what you just did apart from the resulting image on the screen. You can animate both, SVG handles the redrawing for you by just looking at the elements and attributes specified, while with canvas you have to redraw each frame yourself using the API. You can scale both, but SVG does it automatically, while with canvas again, you have to re-issue the drawing commands for the given size.
See Wikipedia: http://en.wikipedia.org/wiki/Canvas_element
SVG is an earlier standard for drawing shapes in browsers. However, SVG is at a fundamentally higher level because each drawn shape is remembered as an object in a scene graph or DOM, which is subsequently rendered to a bit map. This means that if attributes of an SVG object are changed, the browser can automatically re-render the scene.
In the example above, once the rectangle is drawn, the fact that it was drawn is forgotten by the system. If its position were to be changed, the entire scene would need to be redrawn, including any objects that might have been covered by the rectangle. But in the equivalent SVG case, one could simply change the position attributes of the rectangle and the browser would determine how to repaint it. It is also possible to paint a canvas in layers and then recreate specific layers.
SVG images are represented in XML, and complex scenes can be created and maintained with XML editing tools.
The SVG scene graph enables event handlers to be associated with objects, so a rectangle may respond to an onClick event. To get the same functionality with canvas, one must manually match the coordinates of the mouse click with the coordinates of the drawn rectangle to determine whether it was clicked.
Conceptually, canvas is a lower level protocol upon which SVG might be built.[citation needed] However, this is not (normally) the case—they are independent standards. The situation is complicated because there are scene graph libraries for Canvas, and SVG has some bit map manipulation functionality.
UPDATE: I use SVG because of its markup language abilities - it can be processed by XSLT and can hold other markup in its nodes. Similarly I can hold SVG in my markup (chemistry). This allows me to manipulate SVG attributes (e.g. rendering) by combinations of markup. This may be possible in Canvas but I suspect that it's a lot harder.
SVG is like a "draw" program. The drawing is specified as drawing instructions for each shape and any part of any shape can be changed. Drawings are shape-oriented.
Canvas is like a "paint" program. Once the pixels hit the screen, that is your drawing. You cannot change shapes except by overwriting them with other pixels. Paintings are pixel-oriented.
Being able to change drawings is very important for some programs; e.g. drafting apps, diagramming tools, etc. So SVG has an advantage here.
Being able to control individual pixels is important for some artistic programs.
Getting great animation performance for user-manipulation via mouse drags is easier with Canvas than SVG.
A single pixel on the computer screen will often consume 4 bytes of information and a computer screen these days takes several megabytes. So Canvas might be inconvenient if you want to let the user edit an image and then upload it again.
By contrast, drawing a handful of shapes that cover the entire screen using SVG takes up few bytes, downloads quickly, and can be uploaded again easily with the same advantages going in that direction as when it comes down on the other direction. So SVG can be faster than Canvas.
Google implemented Google Maps with SVG. That gives the web app its zippy performance and smooth scrolling.
High Level Summary of Canvas vs. SVG
Canvas
- Pixel based (Dynamic .png)
- Single HTML element.(Inspect element in Developer tool. You can see only canvas tag)
- Modified through script only
- Event model/user interaction is granular (x,y)
- Performance is better with smaller surface, a larger number of objects (>10k), or both
SVG
- Shape based
- Multiple graphical elements, which become part of the DOM
- Modified through script and CSS
- Event model/user interaction is abstracted (rect, path)
- Performance is better with smaller number of objects (<10k), a larger surface, or both
For detailed difference, read http://msdn.microsoft.com/en-us/library/ie/gg193983(v=vs.85).aspx