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

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