?>

SVG vs Canvas, optional

comparaison svg canvas quel format choisir

Which format should I choose to integrate graphics into a web page or to create an online application?

Tags and Items

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

For example, vector text is displayed in SVG:

Text in SVG 

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

And with Canvas:

Text from 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("Un texte avec Canvas", 16, 24);
}
window.onload=cText;
</script>

Vector and bitmap?

Although SVG is a vector, so the user can resize the image, Canvas is not a bitmap. In fact, the API has a "zoom" function that allows you to dynamically override the image size.

In addition, both media can contain bitmaps, so vector opposition to a bitmap is not worth it, as is often done incorrectly.

User interaction

SVG code consists of tags that can be combined with HTML tags. For example, you can place a link in an SVG image as follows:

Reference 

<svg width="320px" height="48px">
  <g>
     <a href="#" onclick='alert("Clic")'>
        <text font-size="16" x="16" y="16" style="fill:blue">
             Un lien cliquable
       </text>
   </a>
  </g>
</svg>

You can click the text. In fact, you can attach an event such as onclick to any SVG tag: the SVG code is part of the DOM.

Automatically create dynamic content

Since SVG is made of XML tags, it is possible to create SVG graphics using a graphics editor. A picture created with Inkscape can be saved as an SVG file and pasted directly into a web page.
On the other hand, graphics in Canvas are dynamically generated by JavaScript code while the page is loading.

Scenario

Canvas content is known to be implemented by a script, but can the same be done with SVG? In fact, for example, let's 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);

Thus, you can create dynamic content using SVG by defining functions equivalent to those of the Canvas API.

Speed

In terms of speed, Canvas will always take priority, as SVG content fits into the document and DOM, even when it is generated dynamically, which slows it down.

The classic Invaders game is slow to wear in SVG. Canvas fits better in this case.

Conclusion

You can often do the same thing with both formats, for example, create a button in SVG or canvas. The advantage of SVG is the ability to visually produce documents using software. These documents can become interactive by adding events such as onClick.
You can easily define a graphical user interface in SVG, as in XUL or XAML.
But Canvas is much faster and better suited for animation, for graphics that change when programming.

Resources