Scalable Vector Graphics

According to the W3C's web site on SVG, it is a " . . . language for describing two-dimensional graphics and graphical applications in XML" (http://www.w3.org/Graphics/SVG). The latest released version of the specification is 1.1, but a draft copy of 1.2 is currently being reviewed, and there are both print and mobile versions of the specification.

Currently, Opera and Firefox support SVG, Safari has plans to add support (and support is showing up in nightly builds), and there is a viewer provided by Adobe for viewing SVG in IE.

Tip

The Adobe SVG Viewer for IE can be accessed at the Adobe site at http://www.adobe.com/svg/viewer/install/main.html. Be aware, though, that Adobe is dropping support for the Viewer beginning January 1, 2008.

SVG is XML-based, consisting of a basic set of XML elements, each with attributes that determine how the element is drawn. There are two ways to incorporate SVG. The first is to create SVG markup as a separate document, and then embed it into the page. The second is to use inline SVG.

Embedding SVG

To use an embedding approach, you create a separate SVG file and then use an embed, object, or iframe element to include the SVG within a web page.

The preferred approach is to use the newer, standard object element. An example of using object with an SVG file is the following:

<object type="image/svg+xml" data="./some.svg" width="200" height="150" ></object>

If you want to provide alternative content for browsers that don't support SVG, ...

Get Adding Ajax now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.