What is the key difference between Canvas and SVG?

By December 26, 2017 Css, Html No Comments

Differences between Canvas and SVG graphics?

For making you web page more interactive and graphically more enhanced HTML5 introduced two graphical elements Canvas and SVG. Both are very useful for creating graphic elements on web page and have their own properties. before discussing differences between them, Please have a look quick look on each, so that it makes you more clear to you, what they are and that they does.

What is SVG?

The Scalable Vector Graphics (SVG).  SVG is an XML-based image format that is used to define two-dimensional vector based graphics.  Vector Graphics Mean, you can scale the SVG image whithout loosing its quality, while in .jpeg or .png image will be distorted or get blured if you scale more than from its dimension. In a one line vector image can be scaled up or down without losing the image quality.


Advantages of using SVG over other image formats like JPEG, PNG, GIF.

  • The most important thing SVG images is based on XML, Every individual element of an SVG image is present in DOM tree, means you can access them via CSS or JS.
  • SVG images can be created and modify using JavaScript in real time, means you don’t need to render the complete graphic on browser you can just change specific element behavior using JavaScript.
  • You can put a hyperlinks inside SVG images to link other documents or resource.
  • SVG images can be used for printing high quality graphic.
  • SVG content can be animated using the built-in animation elements or using JS.


What is canvas?

The <canvas> is an another HTML5  element that is used to draw rich graphics on web-page, using JavaScript. The <canvas> element is only a container or stage that provide a base/platform for drawing graphics elements using JavaScript. Canvas has it’s own several methods and elements for drawing paths, boxes, circles, text, and adding images etc.

Canvas is not a vector graphic, canvas is Raster based image (composed of pixel).


Difference between SVG and Canvas:

SVG Canvas
Vector based image (composed of shapes) Raster based Image (composed of pixel)
SVG is Multiple graphical elements, which become the part of the DOM Tree. Each element is present in DOM Model. It is a Single HTML element similar to <img> tag in behavior. Its elements are present in DOM Model
SVG images can be modify using JavaScript and CSS Can Modify through JavaScript only.
Better scalability — can be printed with high quality at any resolution Poor scalability — not suitable for printing on higher resolution
To make any change inside the SVG,  can be done using JS, because elements are present in DOM, no need to re-render on browser. To make any change in canvas you need to re-draw the complete canvas on browser.


About Vijay Dhanvai

A passionate blogger by heart and mind, I have been working in this field for 7 years now. A WordPress Professional, web developer and designer who intends to guide his readers about Web Design, WordPress, Blogging, Web Development, and more.

Leave a Reply