SVG vs Canvas, at decision time

comparison svg canvas what format to choose

What format to choose to embed graphics into a Web page, or to build an online application?

Tags cons functions

SVG is a markup language derived from XML. Canvas is an API, so a set of JavaScript functions using <canvas> as container (SVG uses the tag <svg>).

For example, here is how a vector text is displayed in SVG:

A text in SVG 

<svg width="320px" height="48px">
  <g>
    <text font-size="24" font-style="italic"  x="16" y="24" style="fill:purple">
        A text in SVG
    </text>
  </g>
</svg>

And with Canvas:

A text with Canvas 
<canvas id="can" width="320" height="48">Un texte avec Canvas</canvas>
<script>
function cText()
{
  var ctx = document.getElementById('can').getContext('2d');
  ctx.fillStyle="rgb(255,32,32)";
  ctx.font='italic normal 24px Calibri, sans-serif';
  ctx.fillText("A text with Canvas", 16, 24);
}
window.onload=cText;
</script>

Vector and bitmap?

While it is clear that SVG is vector, so that the user can resize the image, Canvas is not bitmap. In fact, the API has a "scale" function that to change the image size dynamically.

In addition the two formats can contain bitmaps, so the opposition vector against bitmap is not worth as it is often stated.

User interaction

The SVG code is made of tags that can be combined with HTML tags. For example you can place a link in an image and SVG:

A clickable link 

<svg width="320px" height="48px">
  <g>
     <a href="#" onclick='alert("Click")'>
        <text font-size="16" x="16" y="16" style="fill:blue">
             A clickable link
       </text>
   </a>
  </g>
</svg>

You can click on the text. In fact you can attach events such as onclick to any SVG tag as SVG code is part of the DOM.

Automatic generation vs. dynamic content

Because SVG is made of XML tags, it is possible to produce graphics in SVG format by software. A drawing produced with Inkscape can be saved in SVG and directly into a Web page.
Conversely, graphics are generated dynamically in Canvas by JavaScript at page loading.

Scripting

We know that the contents of Canvas is done by a script, but can we do the same with SVG? Indeed, we can for instance draw a green rectangle ...

<svg width="320px" height="100px">
  <g id="mysvg"></g>
</svg>
function rect(svgelement, x, y, w, h) 
{
  var rec = document.createElementNS("http://www.w3.org/2000/svg", "rect");
  rec.setAttribute("style", "fill:green");
  rec.setAttribute("x", x);
  rec.setAttribute("y", y);
  rec.setAttribute("width", w);
  rec.setAttribute("height", h);
  svgelement.appendChild(rec);
}
rect(document.getElementById("mysvg"), 10, 10, 200, 80);

We see that we can generate dynamic content with SVG by defining functions equivalent to those of the Canvas API.

Speed

In terms of speed, Canvas will always win because the SVG content must be integrated into the document and the DOM, even when it is generated dynamically, which slows it down.

The classic Invaders game in SVG is slow. Canvas would had been a better choice in this case.

Conclusion

We can often do the same with both formats, for example, create a button in canvas or SVG. The advantage of SVG is the ability to produce documents with a visual software. These documents can become interactive by attaching events such as onClick.
You can easily define a graphical user interface with SVG as with XUL or XAML.

But Canvas is much faster and more suitable for animation, for graphics that change by programming.

Comments

Resources