collected from stackoverflow

High Level Summary of Canvas vs. SVG

Canvas

  1. Pixel based (Dynamic .png)
  2. Single HTML element.(Inspect element in Developer tool. You can see only canvas tag)
  3. Modified through script only
  4. Event model/user interaction is granular (x,y)
  5. Performance is better with smaller surface, a larger number of objects (>10k), or both

SVG

  1. Shape based
  2. Multiple graphical elements, which become part of the DOM
  3. Modified through script and CSS
  4. Event model/user interaction is abstracted (rect, path)
  5. Performance is better with smaller number of objects (<10k), a larger surface, or both

 

It 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 to 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.

Two things that hit me the most for SVG and Canvas were,

Ability to use Canvas without the DOM, where as SVG depends heavily on DOM and as the complexity increases the performance slows down. Like in game design.

The advantage of using SVG would be that resolution remains the same across platforms which lacks in 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.

For detailed difference, read http://msdn.microsoft.com/en-us/library/ie/gg193983(v=vs.85).aspx

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>