SVG:The Art Is In The Code By Eddie Traversa

By Eddie Traversa (etraversa@dhtmlnirvana.com)

[Note: To view the examples in this article, you will need the Adobe SVG plug-in.]

Introduction

One of the most exciting developing technologies is Scalable Vector Graphics (SVG). SVG is exciting because it offers Web developers a method to create and animate images through an XML programming language. Consequently, rather than being removed from their code as is often the case with proprietary technology. Animation techniques can range from a simple linear movement to 3D double helix morphing effects. Web developers, once they are more aware of the possibilities, can find unprecedented levels of control. There are many advantages of using SVG as the following short feature list demonstrates:

• Compatibility with other mediums such as wireless devices
• Scalable Server Solutions
• Small file sizes for faster Web page downloads
• Unlimited color and font choices
• Zoomable graphics and images
• Scripting control for custom interactive events and animation
• Clean, crisp, high-resolution printing from Web browsers
• Bitmap-style filter effects for high-impact graphics
• Text-based format easily integrates with other Web technologies
• Built in International Language Support
• Reduced Maintenance Costs
• Easily Updated
• Rich Multimedia Capabilities

Flash and SVG are often compared because the two have similar features. The reality is that SVG has some distinct advantages over its main competitor Flash. Perhaps chief among them is the compliance with other standards. SVG can utilize CSS and the DOM, where as Flash relies on proprietary technology that is not open source. SVG by contrast is open source and developers can readily learn from other developer's efforts in this area.

While SVG has not yet reached the popularity level of Flash, times are changing quickly bringing with it a sense of enthusiasm for SVG. Mozilla plans to fully support SVG, Microsoft has similar plans, and Adobe GoLive 5 also supports SVG. Additionally, SVG editors are now surfacing on the Web. Programs such as Jasc's WebDraw which allows for the creation of SVG in a visual format are excellent additions to the SVG paradigm. The future of SVG not only seems bright, it seems certain to play a major role on the Web in the years to come.

There are however some drawbacks and one of the major drawbacks at the moment is that no browser fully supports SVG currently. As a consequence, SVG has to be displayed through the use of a plug-in such as the Adobe SVG plug-in. While it is a good plug-in it does not currently support all the SVG specifications, it is a heavy download, and perhaps the biggest barrier is that it is CPU intensive. Still, despite these drawbacks it does allow for cross-browser implementation of SVG and the use of the plug-in is likely to increase dramatically in the years to come.

The other drawback is that there is a distinct lack of online material that directly relates to understanding how SVG can be employed in developing Web sites. This tutorial begins to address this issue by looking at the fundamental concepts of SVG.

Before proceeding, it needs to be noted that SVG is feature rich. So much so that a couple of volumes of books would have to be written to cover the topic adequately. Therefore, what is presented here is not meant to cover every aspect of SVG, but rather attempts to give a general feel of the possibilities SVG affords developers. With that having been said, on with the show...