XML as Art

The World Wide Web Consortium (W3C) has proposed a new standard, Scalable Vector Graphics (SVG), for delivering scalable, 2-D images to the Web. Unlike many of its printed-media predecessors, such as Adobe's Encapsulated PostScript (EPS) format, SVG is based on an open XML standard. Although I can't describe a completely new standard in one short column, I want to touch on why SVG is such an amazing new tool to add to your Web and XML arsenal.

Current graphic formats, such as JPEG and GIF, are bitmap files, represented as a graph of colored pixels. If you try to resize an image, you force your browser to interpolate the bitmap, which creates ugly, pixilated edges and lines. In addition, for systems to deliver bitmap formats to the user quickly and effectively, the formats must use compression and color palettes. Even by current compression standards, image delivery can rack up huge download times based on the image's file size and the user's connection speed. Although GIF is the only supported format that delivers limited transparency and animation, JPEG is the only format that supports 32-bit true color. From a practical standpoint, you can't dynamically generate images without support from external tools.

SVG addresses the bitmap formats' limitations by being scalable, searchable, platform-independent, and text-based. As the culmination of several different standards and proposals—such as Microsoft's VML and Adobe's EPS-based PGML—SVG has gained numerous supporters, including leaders such as Adobe, Apple, Autodesk, BitFlash, Corel, HP, IBM, ILOG, INSO, Macromedia, Microsoft, Netscape, OASIS, Open Text, Quark, RAL (CCLRC), Sun, Visio, Xerox, and W3C staff.

Like all the XML standards we know and learn, SVG object-based shapes and movements are tag-based and attribute-controlled, relying heavily on styles to define presentation. This approach lets both simple and complex images maintain a small footprint, using virtually no space when compared to today's standards. Let's first examine a simple circle so you can see what I mean. (To view the two SVG samples I discuss, you need to have Adobe's SVG browser plug-in installed. You can find this plug-in on the Adobe site.)

Figure 1a shows a simple circle rendered as a JPEG image. The XML code, Listing 1, shows how to render that same circle as an SVG image. (If you want to see the SVG image, go to my company's Web site, scroll down to "XML Update - XML as Art," and click to download a zip file that contains two SVG images—this circle and the logo I discuss next.)

Notice in the XML code that the XML document begins by declaring itself an XML document, then supplies the Document Type Definition (DTD) required to make this a valid XML sample. Beyond that, you find an svg tag that declares the scope of the area you'll draw in. All shape and text tags are nested within this tag. You then find a simple circle tag. Attributes within this particular tag are style and transform. Style dictates the size and color of the shape; the transform tag places the shape within the scope of the drawing area. That's it. You have your circle.

Although this image might seem unimpressive at first glance, take into account that the compressed (and thereby degraded) circle in Figure 1a is a 4K JPEG image file while the actual circle code in Figure 1b is 444 bytes, almost 10 times smaller. In addition, you can scale an SVG shape without affecting the image size or appearance. And you can generate SVG programmatically on the fly as you would any other XML document.

Now lets examine a more complex image. Figure 2a shows my company's logo rendered as a JPEG image. The XML code, Listing 2, shows how you would render that logo as an SVG image (see the zip file I mention above for the SVG image).

This sample demonstrates grouping, custom shapes, and scaling. Notice that the transform matrices can quickly become very complex, which makes designing custom shapes by hand time-consuming and impractical. I see an excellent opportunity for an unknown software company to enter the market with an SVG design application that supports this type of complexity. However, established vector-based products, such as Adobe Illustrator and Corel Draw, will likely expand to cover this market. In either scenario, Web designers will welcome a graphical interface for developing complex images.

The implications of applying SVG technology to the real world are huge, ranging from on-the-fly graphs and charts to maps that can zoom easily to complete presentations built entirely in XML that include fading and animation. Conceptually, SVG could even move into the print world as a vector standard, replacing the existing proprietary formats and providing for a seamless transition from print to digital format and back again. Several SVG artists are already out there. Take time to investigate the following links for more information.

W3C SVG Specification
W3C SVG Test Suite
SVG Art
Adobe SVG site
Sun Microsystems