Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Voices That Matter

Web Design Reference Guide

Hosted by

SVG and SMIL

Last updated Oct 17, 2003.

By Molly Holzschlag

Scalable Vector Graphics (SVG) is an application of XML. Via markup, graphic images, animations, and interactive graphic designs can be designed and implemented for Web viewing. Of course, browsers must support the technology, which is one reason why many developers haven't looked into it too seriously or perhaps haven't heard of it at all.

It is being developed under the auspices of the W3C. As a result, much work has been done to make it compatible with other standards, including XML, XSLT, CSS2, DOM (Document Object Model), SMIL, HTML 4.0, XHTML 1.0, and sufficient accessibility options via the WAI (Web Accessibility Initiative).

SVG is, as one can imagine, quite complex in its syntax. And the more complex a design becomes, the more complex the markup becomes. As a result, the development of graphical user interface (GUI) tools for SVG began early. There are several of these tools available that offer a standard drawing environment but export to SVG for use in supported browsers. Also, many familiar graphic companies and graphic design products are adding SVG export support to their product lines.

SMIL (pronounced "smile"), the Synchronized Multimedia Integration Language, can be considered the masterful conductor leading an orchestra of musicians. Or maybe it's the traffic cop who tells you when to go and when to stop. And in the right hands, it can be the loom that allows the artist to weave a tapestry of sight and sound.

You don't create music with SMIL, but you can use it to start the first note at precisely the right moment. You can't create a compelling picture with SMIL, but you can bring an image to life by adding music and text to it. If you learn nothing else in this section, remember this: SMIL is the synchronization of sight and sound.

This prodigy of the W3C allows you to easily position various multimedia elements within a player window, synchronize them, and allow users to play back those elements according to their bandwidth, language choice, and other individual preferences.

SMIL, as with SVG, is an XML-based language that incorporates the precision and versatility of extensible code. If you're already adhering to the rules of XHTML, learning how to code in SMIL is really quite easy—at least in the beginning stages.