Developer

Getting up to speed on Scalable Vector Graphics

Scalable Vector Graphics (SVG) may hold the key to power graphics representation in your applications. See an example of XML for SVG and learn how this new format could benefit you.


I previously discussed some of the features of Scalable Vector Graphics (SVG), including its content-based approach and ability to include sophisticated animation. This week, we’ll touch on a couple of additional features and look at some XML for SVG. We’ll also point you to several online resources where you can get more information and tools for SVG.

Easy creation with XSLT
Because SVG images are really just XML documents, they can be easily created using XML tools. One particularly useful tool is the Extensible Stylesheet Language Transformations (XSLT) template. Using XSLT, you can create an image template that is the basis for several other images and then translate an existing XML document using the template to create new images based on the XML data. This approach allows you to create extremely dynamic images with very little work.

Query-enabled
SVG is also query-enabled. This means that you can perform queries against the SVG document as you would any other XML document. Using this technology, you can retrieve any data stored in the document for use elsewhere.

SVG data
Let’s look at an example of SVG data. Listing A shows a snippet from an SVG document that draws a small black square. The <path> element defines a simple path object, which actually does the job of drawing the shape. The “d” parameter provides the SVG processor with data that tells it how to draw the particular image. In this case, it performs a move (M), three line-tos (L), and a closepath (Z).

Resources
Now that you have some idea of what makes up an SVG document, you may want to visit the following sites for more information. Some of these sites offer downloadable tools you can use to start working with SVG documents.

World Wide Web Consortium (W3C)
The W3C is the standards body that is currently reviewing the SVG specification, and it's the same organization that will publish the final “official” specification. Its Web site contains all the details of the SVG specification, as well as information about the working group that is creating the SVG standard.

Adobe
Adobe, a leading software developer in the graphics market, is strongly backing the SVG effort. Adobe already has tools available for both creating and viewing SVG documents. It even has a Web browser plug-in for viewing SVG graphics.

Sun Microsystems
Sun Microsystems, a leading UNIX vendor, is also providing support for SVG graphics. It has an SVG generator available, as well as a slide show toolkit. Its developer site provides great information on creating SVG documents.

Summary
SVG is going to be one of the next big things in the online world, offering scalability, flexible content retrieval and manipulation, and ease of creation and reuse. Now that you have seen a few of the features of SVG and a bit of sample XML code, you can start to investigate some of the ways SVG may benefit your applications.

Editor's Picks

Free Newsletters, In your Inbox