SVG, or Scalable Vector Graphics, is a format that defines vector graphics and their transforms using XML. The vector part means you're not describing pixels in an image. You're describing primitive shapes and how they should be decorated, sized, and situated. The XML part means you can embed the graphic in an existing XML (or almost XML) document like, say, HTML. As an example, the following snippet defines a red circle centered at 50,50 relative to its container with a radius of 45. (If you can't see the result, your browser doesn't support SVG.)
When you deliver your app in a browser, rich-graphic options are limited. You can embed an object that requires a non-standard runtime like Adobe's Flash, Silverlight, or Java, you can use the <canvas> element, or you can use SVG. Flash, Silverlight, and Java must be installed before you use them. This may annoy or confuse your users. At worst, non-admin users may not have the rights required to install the browser plugin. Canvas and SVG are nice because they don't, in theory, require an install. Your browser already supports them.
Another advantage is that all SVG objects are members of the DOM. This means they're fully scriptable and can be styled using CSS. SVG and non-SVG elements can share data and affect each other. Wiring up an event for an SVG element is as easy as any other HTML element. With jQuery:
This is considerably easier than managing canvas content. Canvas works in pixels, so all UI events need to be calculated from an action on the canvas. There's no concept of individual elements. If you want to change the way something looks on a canvas, you can't apply a style. You need to calculate the new look and render it.
Depending on the graphic, SVG definitions can be much smaller than their bitmap alternatives. They are also constructed in the browser from their XML description versus transmitted as a complete object. This can reduce server load.
Finally, vector graphics look great at any resolution. You'll appreciate this if your application is viewed on devices of varying dimensions. Your graphics will also survive a tablet's pinch and zoom.
Like any technology, SVG is not a panacea. It may be the wrong tool if you need universal browser support and can't live with emulation. Even browsers that support SVG don't necessarily support the whole specification. Possibly worse, the W3C recommends three specifications: full, tiny, and mobile. Tiny and mobile are subsets of the full specification. Taken together, these facts can cause headaches when trying to design a single solution for all platforms. The more complicated your SVG, the more likely you are to run into problems.
As developers stressed SVG's capabilities for in-browser games, they discovered practical limits. If your SVG graphic has thousands of elements, performance may degrade and it may be more efficient to render to a canvas. It's not always obvious which approach will perform better. Be sure to test each before making a decision.
Making it Easy with Raphael (or D3 or Bonsai or svgweb...)
I've used Raphaël in several SVG projects and it has never let me down. As mentioned earlier, Raphaël offers a consistent API that renders graphics using SVG or VML, depending on what the target browser supports. It's easy to use because it favors names that match SVG entities and attributes.
This isn't a Raphaël tutorial, so I won't go into detail. I'll just point out that Raphaël makes your life easier. Beyond abstracting the vector language, it handles events, animations, and complex transforms.
A complex shape:
Animate a shape:
SVG Makes You Useful
SVG is a rich technology and it's growing. It's supported by the most recent version of every major browser, including IE. It's complemented by other interesting technologies like SMIL (Synchronized Multimedia Integration Language), which enables SVG animation using markup versus scripting.
With the right library, you can forget about browser compatibility issues and get to work. Creating rich content is no more difficult than manipulating <div>s and CSS classes. So, the next time a project shareholder suggests an interactive pie chart (or any other interactive diagram), stop before you say no and consider SVG. It could make your project more useful, make your project more interesting, and make you look like a hero.
“An SVG Primer for Today's Browsers” from the W3C is a great document if you can get past its formal preamble. It covers basics, advanced effects, animations, and scripting dynamic elements.
D3 (Data-Driven Documents) is an actively-developed library for data manipulation and visualization.
US States and Their Capitals is an SVG game I built to help my third grader learn her states and capitals. As always, there are a million things I would do different if I had to do it again. Still, it contains a few complicated shapes, uses simple animation, and shows how HTML and SVG can work together.