What is the difference between SVG and HTML5 Canvas?

Question

What are the differences between SVG and HTML5 Canvas? They both seem to do the same to me. Basically, they both draw vector artwork using coordinate points.

What am

Answer 1

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.

Answer 2

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.

Answer 3

It is absolutely depends on your need/requirement.

• If you want to just show an image/chart on a screen then recommended approach is canvas. (Example is PNG, GIF, BMP etc.)

• If you want to extend the features of your graphics for example if you mouse over on the chart want to zoom certain area without spoil display quality then you select SVG. (Good example is AutoCAD, Visio, GIS files).

If you want build a dynamic flow diagram creator tool with shape connector it is better to select SVG rather than CANVAS.

• When the size of the screen increases, canvas begins to degrade as more pixels need to be drawn.

• When the number of objects increases on the screen, SVG begins to
  degrade as we are continually adding them to the DOM.

Also please refer : http://msdn.microsoft.com/en-us/library/gg193983(v=vs.85).aspx

Answer 4

SVG

Based on use case SVG is used for logos, charts because its vector graphics you draw and forgot about it. When view port change like re-sizing(or zoom) it will adjust itself and no need to redraw.

Canvas

Canvas is bitmap (or raster) it done by painting of pixels to the screen. It is used to develop games or graphics experience (https://www.chromeexperiments.com/webgl) in a given area it paints pixel and changes by redraw it another. Since its a raster type we need to redraw entirely as view port changes.

Reference

http://www.sitepoint.com/7-reasons-to-consider-svgs-instead-of-canvas

http://en.wikipedia.org/wiki/WebGL

http://vector-conversions.com/vectorizing/raster_vs_vector.html