How does Canvas differ from SVG?
The HTML5 introduced the two graphical elements Canvas and SVG for creating rich graphics on the web, but they are fundamentally different. The following table summarizes some of the basic differences between these two elements, which will help you to understand how to use the Canvas and SVG elements effectively and appropriately.
| SVG |
Canvas |
| Vector based (composed of shapes) |
Raster based (composed of pixel) |
| Multiple graphical elements, which become the part of the DOM |
Single HTML element similar to <img> in behavior |
| Modified through script and CSS |
Modified through script only |
| Give better performance with smaller number of objects or larger surface, or both |
Give better performance with smaller surface or larger number of objects, or both |
| Better scalability — can be printed with high quality at any resolution |
Poor scalability — not suitable for printing on higher resolution |