html

Canvas vs SVG in HTML

SVG and canvas are both HTML5 technologies used to create graphics, images, and shapes. SVG and Canvas are fundamentally different but both are used to create an incredible visual experience. This write-up will present a comprehensive comparison of the SVG and Canvas element. Moreover, it provides a couple of examples for a better understanding of how to use Canvas and SVG in HTML.

Canvas

Canvas is an element in HTML that is used to draw the graphics on websites with the help of JavaScript. Canvas is considered as a container so, without JavaScript, we can’t create any drawing in canvas.

  1. Canvas has a very simple and easy-to-understand syntax.
  2. Canvas is an element in HTML that has numerous methods to draw lines, circles, images, etc.
  3. Canvas images can be saved in .png or .jpg format.
  4. It is recommended to use canvas graphics for gaming applications.
  5. Canvas utilizes bitmap image format and is referred as pixel-based technology.
  6. It is highly dependent on the resolutions therefore not recommended for large screens such as Google Maps.
  7. Canvas can be modified through script only and it has no support for the event handlers.
  8. Canvas provides better performance with smaller surfaces or a large number of objects.

Example

The below-given code will provide a profound understanding of the Canvas. It will describe how to draw a circle on canvas:

<body>

<canvas id="Rectangle" width="210" height="120" style="border: 3px solid green">

<script>

var canRect = document.getElementById("Rectangle");

var objContext = canRect.getContext("2d");

objContext.fillStyle='red';

objContext.fillRect(15,15,175,85);

</script>

</body>

In the above snippet, firstly a canvas element is created and we assign an id to it. Next, in JavaScript, we utilized the getElementById() method to find the canvas element. Afterward, we created an object using getContext() and finally, we drew a rectangle on the canvas:

SVG

SVG was developed to create vector graphics and it is an XML-based vector image format for interactivity.

  1. Unlike canvas, SVG is resolution-independent and scalable, so it is recommended to use on large screens user interfaces such as Google Maps.
  2. SVG graphics are more flexible as their size can be expanded
  3. SVG can be modified from the script as well as from CSS
  4. SVG provides support for event handlers.
  5. SVG provides high performance with large surfaces or a small number of objects.
  6. SVG is not suitable for gaming applications.

Example

The below-given snippet demonstrates how to create a circle in SVG:

<body>

<svg width="300" height="300">

<circle cx="100" cy="100" r="50" stroke="red" fill="blue" />

SVG image not supported!

</svg>

</body>

SVG tag specifies the width and height as 300px, and within <svg> tag we utilize a <circle> tag. x (horizontal) and y (vertical) coordinates of the circle are set as 100px and the radius of the circle is 50px.

Above code snippet generates the following output:

The blue-colored SVG circle with a red stroke verifies that the SVG graphics are implemented.

Conclusion

SVG and Canvas both are used to create graphics, images, and shapes but both adopt different approaches. SVG is based on scalable vector technology so it provides high-quality pictures while Canvas is pixel-based technology therefore if someone zooms the picture there is a possibility that it affects the picture’s quality.

About the author

Anees Asghar

I am a self-motivated IT professional having more than one year of industry experience in technical writing. I am passionate about writing on the topics related to web development.