SVG is a language for describing 2D graphics using XML, whereas Canvas draws 2D graphics on the fly using JavaScript.
Since SVG is XML-based, every element is accessible within the SVG DOM, allowing you to attach JavaScript event handlers to SVG graphics.
In SVG, each drawn shape is retained as an object. When the attributes of an SVG object are modified, the browser can automatically re-render the shape.
Canvas, on the other hand, renders graphics pixel by pixel. Once a graphic is drawn on a canvas, it is forgotten by the browser. To change its position, the entire scene, including any objects that were covered by the graphic, must be redrawn.
|
SVG |
Canvas |
|
· Resolution independent · Supports event handlers · Excellent text rendering capabilities · Slow rendering for complex graphics · Not ideal for game applications |
· Resolution dependent · Does not support event handlers · Poor text rendering capabilities · Allows saving the resulting image as .png or .jpg · Well-suited for graphic-intensive games |