Developer

Getting started with SVG

SVG is open source and offers seamless database integration, server-scripting compatibility, and efficient accessibility/localization work flow. Learn about the different features of SVG.

By Jackson West

Columnist David Emberton offers an introduction to some of the theory and technology behind SVG, including its basis in XML and its endorsement and development by the W3C and corporate partners such as Adobe, Corel, and RealNetworks. SVG is open source and offers seamless database integration, server-scripting compatibility, and efficient accessibility/localization work flow, but what good is a technology if you can't make it sing and dance?

Unlike Flash, the Web standard for animation and vector graphics, SVG can seem incredibly complicated, requiring math, scripting, and a high comfort level with markup languages. Unfortunately, Adobe has done little to reduce the SVG learning curve; the two applications currently touting SVG support, Illustrator and GoLive, treat the technology as optional rather than as core functionality. This treatment came about largely because SVG is not specifically intended to be animated! SVG shines brightest when handling data graphics—maps, blueprints, graphs, and text layout. For these applications, its accuracy and flexible, open source file format make it extremely efficient.

In this tutorial, we'll explore the different features of SVG that are most useful to Web builders and practice our new skills by building a simple working SVG presentation, each step and block of code broken down line by line. We've also built an extended example, titled "Half Steppin'," that expands on the ideas presented in the simple project. Because SVG is open source, you can examine the code for Half Steppin' to learn how we applied the techniques discussed in the article.

The Adobe SVG Viewer relies on JavaScript for most of its dynamic and interactive features, so it will not work in Internet Explorer 5 for Macintosh. Also, during the writing of this article, critical bugs were found running the Adobe SVG Viewer with Netscape on both Macintosh and PC. The examples are 100 percent functional if using Internet Explorer 5 and above on Windows or Mac (assuming you have the correct plug-ins installed). The declarative features of the SVG specification will generally work, however, and these include fonts, bitmaps, vector graphics, simple animation, and digital audio. The Adobe SVG Viewer and the Beatnik Player 2.0 are both free downloads.

Jackson West is a frequent contributor to CNET Builder.com.

Editor's Picks