The two new tags introduced in HTML5 are
<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
<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
<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.
<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
<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
<svg> overlapping each other with the use of some CSS to create a gorgeous page?