Canvas vs. SVG

Canvas vs. SVG

With the advent of Canvas and SVG (scalable vector graphics), developers now have better choices for doing graphics on the Web than in the past.

Before Canvas, plug-ins such as Flash or Silverlight were the standard way to create animations on the Web. The alternative was to create a collection of good old-fashioned HTML, JavaScript and images, and bundle them into a collection of moving parts—a tedious task at best.

Two primary types of graphics are used on the Web:

·         Raster graphics are arrays of pixels arranged on a grid, also known as a bitmap. Common raster file extensions are .jpg, .bmp, .png, .tiff and .psd. Because Canvas uses pixels, it is raster based.

·         Vector graphics use mathematical metadata contained in a file to describe the graphic. The V in SVG stands for vector. Common vector file types are .svg, .eps and .xps.

Canvas and SVG have a few features in common. Both Canvas and SVG have an Open Source library ecosystem, and you never need plug-ins for either technology.

Side-by-side comparison of common Canvas and SVG characteristics.

Canvas	SVG
Single DOM element	Multiple DOM elements
Script language	Markup language
Raster graphics	Vector graphics
No file format	.svg file format
Must reset canvas to change drawn shape	Can edit shapes after drawing
Not accessible	Accessible
Doesn’t support event handlers	Supports event handlers
Non-searchable, can’t index	Searchable, can index
Non-compressible	Compressible
Can use hardware acceleration	No hardware acceleration

Canvas tends to be well suited for highly interactive games, especially when combined with Internet Explorer 9 GPU offloading.
Canvas is a great choice for image editing, and although you can’t edit , you can save the context state to allow the user to undo actions, essentially to do real-time editing.

SVG is great for graphic basics such as displaying a resolution-independent company logo that scales to any screen size without pixel distortion.
Fractals and Mandelbrot sets are just two types of complex data visualizations that are well suited for SVG.