What’s the difference between Canvas and SVG?

Started by 12Three, March 17, 2019, 11:58:43 PM


Citywebpuneind

SVG
Multiple graphical elements, which become the part of the page's DOM tree.   
SVG can be modified through script and CSS.   
SVG gives better performance with smaller number of objects or larger surface.   
SVG has better scalability. So it can be printed with high quality at any resolution.   
Vector based (composed of shapes)   

Canvas
Single element similar to <img> in behavior. Canvas diagram can be saved to PNG or JPG format.
Canvas can be modified through script only.
Canvas gives better performance with smaller surface or larger number of objects.
Canvas has poor scalability. Hence it is not suitable for printing on higher resolution.
Raster based (composed of pixel)