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, when they had to implement myriad hacks and workarounds. Working with both graphics and design elements in Web development is now much easier for non-design-type developers because of technologies such as Canvas and SVG—and, of course, HTML5.

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.

In this article Rachel Appel investigates the advantages and disadvantages of both Canvas and SVG and recommend when you should use one rather than the other.

Read full article on MSDN http://msdn.microsoft.com/en-us/magazine/jj159886.aspx.