XML.Gov Demos: SVG

See a one-page overview of SVG and its advantages.

Note: To view SVG, your browser must be capable of native SVG rendering (i.e., W3C's Amaya) or you must install a plugin such as Adobe SVG Viewer (available for most platforms).

Demo	Explanation
Animated Timeline	Illustrates the chronological development of XML specifications. (This is from some W3C presentation probably, but I can no longer recall exactly where I found it.)
Animated Acronyms	Text can be animated to cycle through colors and/or translate in space. This example animates names of some agencies involved in XML.Gov. This is based on a very similar W3C example.
Animated 9 Planets	See our Solar System in motion! It's a mere 28 KB -- completely self-contained. No external JPGs, no external code. You can zoom in (right click) in real time without impacting the animation. Main point: SVG is helpful to envision numeric information. By Peter Schonefeld (peter@digitalcraft.com.au).
Layered Map with Active Polygons	Andreas Neumann's Vienna Social Patterns and Structures Map illustrates MouseOver user feedback. Even more impressive is the customized SVG ContextMenu (right mouse) which permits the user to view different data layers and to save the current state as SVG!
Visual Building Search	Example by Adobe illustrates SVG for floor plans and location of personnel. [Doesn't work in Netscape 6.23 but does in Netscape 4.79 and IE 6.x.]
Transparency, JavaScript and DOM	Illustrates combining GIF and JPEG images in SVG with various opacity levels. Several objects have live links and one object activates a JavaScript event handler as you MouseOver that changes one of the other objects. (My own example developed for my XML training class for NASA.)

SVG Background

Scalable Vector Graphics (SVG) is W3C's alternative to Flash and bitmapped graphics. SVG enables 2-D resolution- and media-independent graphics in a text-based format. This permits integration with XHTML, XSL and XSLT, XLink, SMIL, DOM and other W3 specifications, including complete support for CSS, scripting, and animation. Text in SVG graphics is fully searchable and selectable. Because SVG is XML text, images can be generated on the fly from databases and applications. Judging from current support from vendors such as Adobe, Sun, Corel, and Jasc, plus involvement from Macromedia, Netscape, Microsoft, Xerox, Kodak, Apple, HP, Quark, and others, it is clear that SVG will have a major impact on Web graphics in the near future.

General Vector Graphics Advantages:

smaller files so faster download times compared to bitmapped graphics (in certain cases)
resolution and device independence
suited for devices with low bandwidth and limited memory
better printing capabilities
permits panning around images
enables zooming in on details not visible when image is initially displayed
grouping, layers, hierarchies, reuse of components
need not come from a static file; can be generated from a database
leverage existing vector graphics investment; export

Advantages Due to the XML Family of Specifications:

validation (DTDs, XML Schema); XML parsers
compatible with XHTML; well integrated into Web pages
scriptable events based on the DOM (hierarchical model)
text labels and desc (descriptions) are directly searchable (can be indexed by search engines)
each graphic element can contain a title (Sec. 508)
linking from any part of an image based on XLink and a elt.
can ref. JPEG or PNG bitmapped graphics via image
supports complex animations and transformations
SMIL : conditionals, timing, animation
Advantages Due to Other W3C Specs
CSS style information to alter rendering
not limited to fonts available on the target device

See Ken Sall's SVG Resources collection.

Get the Adobe SVG Viewer.

Return to Demo Home

Last Updated: July 31, 2002