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

SVG
It is Object Model-based.
Is suitable for using large rendering areas.
SVG provides any support for event handlers .
Modification is allowed through script and CSS.
SVG has Better scalability
SVG is Vector based (composed of shapes).
SVG is not suitable for Games graphics. SVG does not depend on resolution.
SVG is capable for API animation.
SVG is suitable for printing with high quality and any resolution.

Canvas elements

It is pixel based.

Is suitable for using small rendering

Canvas does not provide any recourse for event handlers.

Modification is allowed through script only.

Canvas has poor scalability.

Canvas is Raster based (composed of a pixel).

Canvas is suitable for games graphics.

Canvas is completely dependent on resolution.

Canvas has no any API for animation.

Canvas is not suitable for printing high quality and high resolution.

Answer 2

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

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

Answer 3

adding to the above points:

SVG is lightweight for transferring over web when compared to JPEG,GIF etc and also it scale extremely when resized without loosing the Quality.

Answer 4

SVG is a specification of a drawing like a file format. A SVG is a document. You can exchange SVG files like HTML files. And additionally because SVG elements and HTML elements share the same the DOM API, it is possible to use JavaScript to generate a SVG DOM in the same way as it is possible to create a HTML DOM. But you do not need JavaScript to generate SVG file. A simple text editor is enough to write a SVG. But you need at least a calculator to calculate the coordinates of the shapes in the drawing.

CANVAS is just a drawing area. It it necessary to use JavaScript to generate the contents of a canvas. You can not exchange a canvas. It is no document. And the elements of the canvas are not part of the DOM tree. You can not use the DOM API to manipulate the contents of a canvas. Instead you have to use a dedicated canvas API to draw shapes into the canvas.

The advantage of a SVG is, that you can exchange the drawing as a document. The advantage of the CANVAS is, that is has a less verbose JavaScript API to generate the contents.

Here is an example, which shows that you can achieve similar results, but the way how to do it in JavaScript is very different.

// Italic S in SVG

(function () {

  const ns='http://www.w3.org/2000/svg';
  let s = document.querySelector('svg');
  let p = document.createElementNS (ns, 'path');
  p.setAttribute ('id', 'arc');
  p.setAttribute ('d', 'M 0.9 -0.9 a 0.8,0.4 -10 0,0 -0.9,0.9');
  s.appendChild (p);
  let u = document.createElementNS (ns, 'use');
  u.setAttribute ('href', '#arc');
  u.setAttribute ('transform', 'rotate(180)');
  s.appendChild (u);

})();

// Italic S in CANVAS

(function () {

  let c = document.querySelector('canvas');
  let w = c.width = c.clientWidth;
  let h = c.height = c.clientHeight;
  let x = c.getContext('2d');
  x.lineWidth = 0.05 * w;
  x.moveTo (w/2, h/2);
  x.bezierCurveTo (w*0.02, h*0.4,
                   w*0.4, -h*0.02,
                   w*0.95, h*0.05);
  x.moveTo (w/2, h/2);
  x.bezierCurveTo (w*(1-0.02), h*(1-0.4),
                   w*(1-0.4), h*(1+0.02),
                   w*(1-0.95), h*(1-0.05));
  x.stroke();

})();

svg, canvas {
  width: 3em;
  height: 3em;
}

svg {
  vertical-align: text-top;
  stroke: black;
  stroke-width: 0.1;
  fill: none;
}

canvas {
  vertical-align: text-bottom;
}

div {
  float: left;
}

<div><svg viewBox="-1 -1 2 2"></svg>VG</div>
<div>CANVA<canvas></canvas></div>

As you can see the result is almost the same, but the JavaScript code is completely different.

SVG is created with the DOM API using createElement, setAttribute and appendChild. All graphics are in the attribute strings. SVG has more powerful primitives. The CANVAS for example has nothing equivalent to the SVG arc path. The CANVAS example tries to emulate the SVG arc with a Bezier curve. In SVG you can reuse elements in order to transform them. In the CANVAS you can not reuse elements. Instead you have to write a JavaScript function in order to call it twice. SVG has a viewBox which allows to use normalized coordinates, which simplifies rotations. In the CANVAS you have to calculate the coordinates yourself based of the clientWidth and clientHeight. And you can style all SVG elements with CSS. In the CANVAS you can not style anything with CSS. Because SVG is a DOM, you can assign event handlers to all SVG elements. The elements in the CANVAS have no DOM and no DOM event handlers.

But on the other hand the CANVAS code is much easier to read. You do not need to care about XML name spaces. And you can directly call the graphics functions, because you do not need to build a DOM.

The lesson is clear: if you quickly want to draw some graphics, use the CANVAS. If you need to share the graphics, like to style it with CSS or want to use DOM event handlers in your graphics, build an SVG.

Answer 5

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.

Answer 6

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.

Advantage of using SVG would be that resolution remains the same across platforms which lacks in Canvas.

Lot more detail is provided in this site. http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/