What is the Difference Between Canvas and Svg Tags and Which One Should I Use?

The two new tags introduced in HTML5 are <canvas> and <svg>, the latter standing for Scalable Vector Graphics. They both can allow you to create rich graphics on the page but what is the difference between them and which one should you use?

First, let’s understand the fundamental difference between <canvas> and <svg> from the standpoint of graphics itself. If you are familiar with image formats, you know that there is raster graphics and there is vector graphics. The former one loses quality of the image when enlarged and the latter one retains it. If you have a 100×100 pixel raster image and you blow it up to 400×400 you will get pixelation because each pixel will be four times larger, whereas a vector image will still be smooth because it relies on paths from one relative point on your image to another. The same concept applies to <canvas> and <svg> tags: think of the <canvas> as a raster image you can draw on and the <svg> tag as a vector image containing shapes and paths.

From a standpoint of HTML, there is another fundamental difference between these two tags. <canvas> is simply a rectangular area on which you can draw something with built-in Javascript functions. <svg>, on the other hand, is a container element that can have other tags describing shapes within itself. Given this, you can draw the same things using either of them, but with <svg> you can have CSS control over the shapes within it, as well as anything you can do to an HTML element in Javascript. However, <canvas> tag can provide you with a simpler way to create graphics that are not simple shapes.

So, which one should you use? – it depends on what you are trying to achieve. If you want to create arctic lights effect, you are better off using <canvas> since you can read current colors and modify them accordingly to produce the effect. If you want to create a bricks game, you are better off using <svg> as it would be easier to move specific HTML elements within your frame. But the most righteous answer probably is to use both combined – who said you cannot have both <canvas> and <svg> overlapping each other with the use of some CSS to create a gorgeous page?

Now that you have an understanding of what the difference is, read more about how to draw simple shapes using HTML5 canvas.

This entry was posted in HTML5 and tagged , , , , , , , , . Bookmark the permalink.

One Response to What is the Difference Between Canvas and Svg Tags and Which One Should I Use?

  1. Nancy says:

    Thanks for the share!

Leave a Reply

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