What is the difference between canvas and SVG in HTML5?
Canvas draws pixels using JavaScript. SVG describes shapes as XML elements.
| Point | Canvas | SVG |
|---|---|---|
| Type | Raster (pixels) | Vector (shapes) |
| Quality when zoomed | Becomes blurry | Always sharp |
| Elements in the page | One canvas element only | Each shape is an element |
| CSS and events on shapes | No | Yes |
| Best for | Games, charts with lots of data, image effects | Icons, logos, simple charts |
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="orange" />
</svg>
Output in the browser
See HTML5 Canvas.
Learn more about the similar topics:
| Tutorials |
|---|
| No Content Found. |
| Exercises & Assignments |
|---|
| No Content Found. |
| Interview Questions & Answers |
|---|
| No Content Found. |