Canvas vs SVG in HTML 5

Difference between Canvas and SVG in HTML 5

S.No	Canvas	SVG
1	Meaning: The canvas element is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images. It is a low level, procedural model that updates a bitmap and does not have a built-in scene graph.	Meaning: Scalable Vector Graphics (SVG) is a family of specifications of an XML-based file format for two-dimensional vector graphics, both static and dynamic (i.e., interactive or animated). The SVG specification is an open standard that has been under development by the World Wide Web Consortium (W3C) since 1999.
2	Graphics type used: Based on raster image.	Graphics type used: Based on vector image containing shapes and paths.
3	Rendering Capacity: Rendering capacities is low for large area .	Rendering Capacity: Rendering capacities is high for large area.Example: Google Maps
4	Whether it depends on resolution ? Totally depends on resolution .	Whether it depends on resolution ? Does not depend on resolution.
5	Is there any API available for animation ? There is no API for animation.	Is there any API available for animation ? It is capable for API animation.
6	Animated User Interface: Low interactive animated user interfaces.	Animated User Interface: Highly interactive animated user interfaces.
7	Is it XML-based / Pixel-based ? Canvas is rendered pixel by pixel.	Is it XML-based / Pixel-based ? SVG is XML based.
8	Whether it is suitable for gaming application ? Suitable for gaming application.	Whether it is suitable for gaming application ? Not suitable for gaming application.
9	Whether it supports event handlers ? It does not support event handlers.	Whether it supports event handlers ? It supports event handlers.
10	Whether it is suited for website or application user interfaces ? Canvas is not suited for Web site or application user interfaces. This is because user interfaces typically need to be dynamic and interactive, and Canvas requires you to manually redraw each element in the interface. Other reasons would be the lack of animation and accessibility support.	Whether it is suited for website or application user interfaces ? As SVG is an XML file format, so depending on each Web browser implementation the accessibility of SVG documents can be much better than that of `canvas` elements. This makes SVG a better solution for Web application user interfaces. Even if SVG provides mostly presentational markup, the semantics of the user interface can be improved with ARIA attributes.
11	How Visual Presentation can be created and modified ? Visual presentation created and modified programmatically through script.	How Visual Presentation can be created and modified ? Visual presentation created with markup and modified by CSS or programmatically through script.
12	HTML / Graphical element: Single HTML element similar to <img> in behavior.	HTML / Graphical element: Multiple graphical elements which become part of the Document Object Model (DOM).
13	Whether it supports accessibility ? API does not support accessibility; markup-based techniques must be used in addition to canvas.	Whether it supports accessibility ? SVG markup and object model directly supports accessibility.
14	When it can be used ? Canvas is the best option for fast games or animations where hundreds of elements are being rendered.	When it can be used ? SVG is best suited to scalable and interactive graphics.