Here's an interactive map of the United States. As you hover over a state, it changes color and the name is shown. This is a SVG image done with Raphael. Each state is a path in SVG.
SVG differs from other image types and HTML5 because images are stored as Vectors (SVG stands for Scalable Vector Graphics). Other images are stored as rasters (values of each bit in the image are specified in some way). SVGs have been around awhile, but gained less acceptance because they have not been supported consistently across browser types. A big plus for SVG images is that you can readily provide animation and images can be much smaller.
The SVG standard is controlled by the World Wide Web Consortium (W3C) which is led by Tim Berners-Lee (he’s the inventor of the Internet, not Al Gore). Also note that among other things W3C controls the standards for PNG (Portable Network Graphics).
The only way I found to consistently use SVG images across the major browser types: latest versions of Internet Explorer (IE), Firefox, Chrome and Safari was to embed the SVG images in the webpage. And then SVG animation is not supported on IE9. Obviously even less support is given on the older browser versions.
I found a solution to this inconsistent browser support after some research: raphaëljs.com. Raphael is a small JavaScript library that you include on your webpage that you use for vector graphics. It has cross-browser support because it uses SVG for most browsers, but uses for VML or Vector Markup Language for IE. (I used VML at one point). Raphael (v 2.1.0) currently supports Chrome 5.0+, Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+.
By John Dorsey IT Brigade Inc. 
Images, SVG
SVG, Image, HTML5