Differences Between SVG and Canvas

SVG is XML based, which means that every element is available within the SVG
DOM. You can attach JavaScript event handlers for an element.

In SVG, each drawn shape is remembered as an object. If attributes of an SVG
object are changed, the browser can automatically re-render the shape.

Canvas is rendered pixel by pixel. In canvas, once the graphic is drawn, it is forgotten by the browser. If its
position should be changed, the entire scene needs to be redrawn, including any
objects that might have been covered by the graphic.

Comparison of Canvas and SVG

The table below shows some important differences between Canvas and SVG:

Canvas

SVG

Resolution dependent

No support for event handlers

Poor text rendering capabilities

You can save the resulting image as .png or .jpg

Well suited for graphic-intensive games

Resolution independent

Support for event handlers

Best suited for applications with large rendering areas (Google Maps)

Slow rendering if complex (anything that uses the DOM a lot will be slow)

Web Certificates

W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding.
Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content.
While using this site, you agree to have read and accepted our terms of use,
cookie and privacy policy.
Copyright 1999-2015 by Refsnes Data. All Rights Reserved.