wp standard

SVG vs Canvas which one to choose?

SVG and Canvas are graphic formats to display graphics and visualizations. Both of these formats are supported in modern browsers.

SVG vs Canvas

Below we will discuss the advantages and disadvantages of SVG and Canvas.

SVG Advantages

  • SVG is resolution independent, it can scale to any resolution.
  • Animations are easy in SVG, not only they are easy to create, but also debug and view the layout of the animation.
  • SVG is based on XML format, so you can inspect your animation in the browser and identify all the elements and their attributes to resolve any issues.

SVG Disadvantages

  • SVG is not really good for graphics. It is not the best format for games in the browser.
  • Rendering will be slow if there are to many SVG elements in one animation or visualization.

Canvas Advantages

  • Canvas is the format to go, for games and drawing on the browser.
  • Canvas has a better control of pixels on the browser.
  • Canvas supports interactive video and audio.

Canvas Disadvantages

  • Text rendering is not very good in Canvas.
  • Canvas is resolution dependent and has limited uses in the browser.
  • Canvas is not the best thing for creating web, it is stateless and you have to record the state of canvas elements.

SVG Example

A simple svg in html which displays a rectangle colored orange.

<!DOCTYPE html>
<html>
<body>

<svg width="400" height="110">
  <rect width="200" height="100" style="fill:orange;stroke-width:3;stroke:rgb(0,0,0)" />
</svg>
 
</body>
</html>

svg code sample example

Canvas Example

A canvas in html which displays a rectangle colored orange.

 <!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #c3c3c3;">
</canvas>

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "orange";
ctx.fillRect(0,0,150,75);
</script>

</body>
</html>

canvas code sample example

From the above canvas output, you can clearly see that the canvas has a fixed size and won’t change with resolution, the orange rectangle inside the canvas also remains fixed.

Now you can choose the right tool for graphics and animations in your web applications.