Not Just Another Pretty Graphics Standard

From February to August 1999, the W3C has produced no less than six different Working Drafts of their latest graphics standards entry, Scalable Vector Graphics. This is unprecedented in the entire history of W3C -- never has the Consortium produced this many public versions of a specification in so short a time. Why are they going to so much trouble to make SVG a W3C Recommendation¹ by October 1999?

After all, don't we have enough graphics standards for the Web? We have GIF (Graphics Interchange Format), and JPEG (Joint Photographic Experts Group), and something called PNG (pronounced "ping", Portable Network Graphics) that relatively few people are using. ² We also have WebCGM Profile (Web-based version of the 1987 Computer Graphics Metafile standard) which W3C issued as a Recommendation in January 1999 and is used by aerospace, defense, automotive and electronics industries. And let's not forget Macromedia's Flash (an open standard) and Apple's QuickTime supported by the major browsers. ³ Graphics submissions (Notes) from W3C members in 1998 included DrawML, PGML (Precision Graphics Markup Language), HGML (Hyper Graphics Markup Language), and finally VML (Vector Markup Language) from some company called Microsoft.

So, why do we need yet another graphics standard? Well, first of all, GIF, PNG, and JPEG are all bitmapped (raster) formats that require storing every single pixel of an image. Even though these formats employ sophisticated compression algorithms to reduce the size of the image file, for certain types of images, they require significantly more space than vector graphics.

On the W3C Graphics Activity page, Chris Lilley discusses some of the advantages of scalable vector-based graphics as compared to bitmap graphics. Bitmapped graphics are resolution dependent; they don't look the same on different devices of different resolution. The screen view and printed view may differ. Whereas bitmapped images are static, vector graphics can be rendered with different CSS styles applied in different contexts. Chris says:

W3C is therefore developing a standard vector graphics format, SVG, written in XML and usable as an XML namespace, that matches the needs of content providers and browser vendors alike. It is designed to work well across platforms, output resolutions, color spaces, and a range of available bandwidths. Scalable Vector Graphics will mean that Web documents will be smaller, faster and more interactive, and be displayable on a wider range of device resolutions, from small mobile devices through office computer monitors to high resolution printers. This will be a significant advance in Web functionality.

But what about Flash and QuickTime which are also vector graphics formats? The problem with these formats in that they are binary representations that are only recently becoming open specifications. They require plug-ins to be displayed on a Web page and are not built upon XML, so they cannot leverage any of the XML benefits.

And what about PGML, DrawML, HGML, and VML? Although based on XML, they all had something missing, especially in terms of complete integration with the rest of the XML family of specifications (which, in all fairness, were changing rapidly in 1998 and the first half of 1999). SVG is an attempt to take the best ideas from PGML and VML and make something that is a truly flexible, open standard.

So what exactly is SVG? The CSIRO SVG Viewer page has a nice succinct summary:

SVG or Scalable Vector Graphics is a language for describing two-dimensional graphics in XML. SVG is currently being developed as a standard for web-based display of vector data such as lines and polygons as well as images and text. Graphical objects can be grouped, styled, transformed and composited into previously rendered objects. The feature set includes nested transformations, clipping paths, alpha masks, filter effects, template objects and extensibility. The Document Object Model (DOM) for SVG, which includes the full XML DOM, allows for straightforward and efficient vector graphics animation via scripting with event handlers for any SVG graphical object. Because of its compatibility and leveraging of other Web standards, features like scripting can be done on SVG elements and other XML elements from different namespaces simultaneously within the same Web page.

To summarize, the key advantages of SVG include:

• smaller files so faster download times compared to bitmapped graphics
• resolution and device independence (can scale to match different devices)
• better suited for devices with low bandwidth and limited memory
• better printing capabilities
• panning around images
• zooming in on details not visible when image is initially displayed
• fully compatible with XHTML so SVG can be well integrated into Web pages
• scriptable events based on the DOM
• text labels and descriptions which are directly searchable (can be indexed by search engines)
• linking from any part of an image based on XLink
• supports complex animations and transformations
• not limited to fonts available on the target device
• need not come from a static file; can be generated from a database
• use of CSS style information to alter rendering
• uses conditionals based on the SMIL 1.0 Recommendation

¹ At the time of this writing (late August 1999), SVG is in last call; it should become a Proposed Recommendation by the time you read this, or shortly thereafter.

² However, a recent article on WebReview indicates that PNG is Gaining Acceptance.

³ Check out Macromedia's very cool demo of Flash and QuickTime combined (requires Quicktime 4 plugin and Flash 3).

Doing It With SVG (Scalable Vector Graphics), Part 1
Doing It With SVG (Scalable Vector Graphics), Part 1
SVG Graphics Elements