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.
- 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?
Canvas is not a vector graphic, canvas is Raster based image (composed of pixel).
Difference between SVG and 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|
|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.|