Difference between Canvas and SVG in HTML5
In this article I have described the difference between SVG and Canvas in HTML5.
The main aim of canvas and SVG is to create graphics (image/video) inside the browser using coordinate points, but fundamentally they are different.
Each technology has its own important we can not say that one can abandon Canvas in favor of SVG, or vice-versa.
Canvas
- Canvas draws 2D graphics, on the fly (with a JavaScript) and is rendered pixel by pixel.
- HTML5 Canvas is a versatile JavaScript API.
- The canvas element is used for drawing graphics using JavaScript.
- Its default size is 300 pixel wide and 150 pixel high.
SVG
- SVG stands for Scalable Vector Graphics.
- It is used to define vector based graphics.
- SVG is an XML-based vector graphics format.
- SVG is very flexible content can be static, dynamic, interactive and animated .
Difference between Canvas and SVG
S.N. |
Canvas |
SVG |
1. |
Based on raster image |
Based on vector image containing shapes and paths. |
2. |
Rendering capacities is low for large area |
Rendering capacities is high for large area |
3. |
Totally depends on Resolution |
Doesn't depend on resolution |
4. |
There's no API for animation |
It is capable for API animation |
5. |
Low interactive animated user interfaces |
Highly interactive animated user interfaces |
6. |
SVG is XML based |
Canvas is rendered pixel by pixel |
7. |
Suitable for gaming application |
Not suitable for gaming application |
Further Readings
You may also want to read these related articles :
Ask Your Question
Got a programming related question? You may want to post your question here
Programming Answers here