SVG: The New Flash
By Eric Vitiello Jr.
Macromedia has been the dominant force behind vector-based graphics and animation on the web for nearly the past 10 years. Times change, and new methods are always on the horizon. The upcoming contender for vector graphics is Scalable Vector Graphics (SVG), an XML-based language under development by the W3C.
Most readers are aware that in the early 1990’s, Macromedia developed a product called Shockwave. Shockwave allowed multimedia developers to create an animation and script that animation programmatically, giving a never-before-seen amount of interactivity to multimedia presentations.
Early browsers began supporting Shockwave via plug-ins, and soon Macromedia found that a smaller version of Shockwave should be targeted directly to the browser as the distribution method. In 1996, Macromedia purchased FutureWave software whose product, FutureSplash, became Flash 1.0.
Around the mid 1990’s, XML was the up-and-coming star of the data world because of its simple method for organizing data. Many data schemas were developed in XML; schemas to store and display math information (MathML), general resource descriptions (RDF), and even chemical information (CML). This method for organizing data became the basis for SVG.
The year 1999 arrived, as well as a new XML schema–SVG. The SVG schema provides a structure for vector/raster graphics definition in XML. Included in this specification are definitions for time-based animation, event-based scripting, and document modification, making SVG a strong competitor for Flash.
SVG in Detail
It is apparent that the SVG specification provides alternatives to many of the functions of Flash, and incorporates many others. The creation of vector-based graphical elements is at the heart of SVG, just as Flash bases its structure on these elements. Much like Flash, SVG also includes the ability to create time-based animations for each element and allows scripting of elements via DOM, JavaScript, ECMAScript, or any other scripting language that the SVG viewer supports. Many basic elements are available to the developer in SVG including elements for creating circles, rectangles, lines, ellipses, polygons, polylines, and text. Much like HTML, elements are styled using Cascading Style Sheets (CSS2) or directly via the style attribute.
Currently, many SVG viewers and editors are available to create and view SVG documents. Adobe has created a browser plug-in to allow the display of SVG in the browser, and include support for editing SVG files in Illustrator 10. Other companies such as JASC, Corel, Sun and IBM are including various levels of SVG support in their products. Because of the simplicity of the XML schema, you can create an SVG file with a considerable amount of ease using any text editor.
A simple SVG file containing a black circle would look like:
1: <?xml version="1.0" encoding="UTF-8" standalone="no"?>
2: <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
3: "http://www.w3.org/TR/SVG/DTD/svg10.dtd">
4: <svg xmlns="http://www.w3.org/2000/svg">
5: <title>A Circle</title>
6: <circle cx="100" cy="100" r="50" stroke="black" stroke-width="2px" fill="none"/>
7: </svg>
You will notice the XML declaration on the first line and the SVG DOCTYPE declaration on the second and third lines. Line 4 is the SVG root element, with the SVG namespace. Within this element, you will find an element for the title, and an element for the circle. In the circle element, we define the center point of the circle with the cx and cy attributes and the radius of the circle with the r attribute. The remaining attributes define the stroke around the circle, its color, and an attribute for the circle’s fill color, which is set to “none.”
Other elements can also be created to extend the range of usefulness of SVG. Bitmapped images such as PNG, GIF, and JPG can be inserted with the image element. You can define your own fonts via the SVG schema itself, and even apply text along a path. All of the attributes associated with these elements can be animated with scripts, or the animate element, which is covered later.
Working with SVG
Creating an SVG file is quite simple, and unlike Flash, it does not require the use of a graphical editor or the purchase of any software–the Adobe viewer is free. This simplicity also brings another advantage to SVG over Flash: The text-based nature of XML allows search engines to index the SVG content itself, thereby alleviating the need to create extra meta data for the search engines, as is necessary when using Flash. SVG can even be embedded inline into an HTML document.
SVG’s implementation as an XML-based format also gives developers the distinct advantage of creating SVG graphics based on other XML data. Transformation of XML data into SVG through XSL allows simple translation of data into graphical representations. A transformation from an XML file containing positions of cubicles in an office to SVG can be done simply.
XML Data:
1: <?xml version="1.0"?>
2: <cubicles>
3: <cubicle north="10" east="15" width="10" length="10"/>
4: <cubicle north="0" east="0" width="10" length="10"/>
5: </cubicles>
XSL Transformation:
1: <?xml version='1.0'?>
2: <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
3: <xsl:template match="/">
4: <svg xmlns="http://www.w3.org/2000/svg">
5: <title>Our Cubicles</title>
6: <xsl:apply-templates select="cubicle"/>
7: </svg>
8: </xsl:template>
9: <xsl:template match="cubicle">
10: <rect x="{north}" y="{east}" width="{width}" height="{length}"/>
11: </xsl:template>
12: </xsl:stylesheet>
Resulting SVG Document:
1: <?xml version="1.0" standalone="no"?>
3: <svg xmlns="http://www.w3.org/2000/svg">
4: <title>A Circle</title>
5: <rect x="10" y="15" width="10" height="10"/>
5: <rect x="0" y="0" width="10" height="10"/>
8: </svg>
With this transformation, representation is created of the cubicles in the office, giving an easier to understand graphical view of where the cubicles are in relation to others. Graphical displays of data such as this are endless and easy to create using SVG.
SVG Animation
Animation, as mentioned earlier, is implemented in SVG using the Synchronized Multimedia Integration Language (SMIL), which is also a technology developed by the W3C. To demonstrate the simplicity of the animation capabilities of SVG, we can take our previous circle example, and animate the radius simply by adding an animate element:
1: <?xml version="1.0" standalone="no"?>
2: <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
3: "http://www.w3.org/TR/SVG/DTD/svg10.dtd">
4: <svg xmlns="http://www.w3.org/2000/svg">
5: <title>A Circle</title>
6: <circle cx="100" cy="100" r="50" stroke="black" stroke-width="2px" fill="none">
7: <animate attributeType="XML" attributeName="r" from="0" to="50" dur="2s"/>
8: </circle>
9: </svg>
The animation can also be triggered by events such as onmouseover, onclick, or a script–allowing interactivity between the user and the graphics. Elements such as the circle also contain their own event triggers to tie scripts to the elements. This interactivity is tied to the SVG information in many ways, and can be modified easily. Creating a complex set of animation sequences and different graphics also becomes simple when using SVG. Everything is an element, and everything can be referenced because of SVG’s DOM conformance, giving you unlimited control over where your elements go, how they react, and when they react.
Scripts can modify all values present in the document, as well as modify the actual layout and structure of the document. Modification of the document itself can be an important part of creating a successful interactive SVG document, because the ordering of elements controls the order in which they are rendered to the screen. For example, if a line element is inserted after the circle element, it would be rendered on top of the circle.
SVG Underway
The development of the SVG specification is continuing. SVG 1.1 is currently in Last Call Working Draft status. SVG Basic and SVG Tiny for mobile devices are also in development, giving devices such as mobile phones and PDA devices the advantage of displaying SVG content. This continual development will push forward the acceptance and use of SVG graphics just as the continual development of HTML has pushed that technology forward.
SVG should soon be widespread, and its non-proprietary nature will help to hasten the progress. Flash will continue to be the dominant standard for quite some time because of its large client base. However, SVG is rising quickly. The distribution of the SVG plug-in via browser manufacturers will quickly increase the installed user base, just as it did for Flash. Future versions of various browsers will include SVG viewers as standard, and some already do. The Internet Explorer distribution that includes Acrobat also includes the SVG Viewer.
The breadth of SVG’s use is wide, and transformations from XML into SVG make the possibilities endless. An example of this versatility is a transformation of population statistics over time directly into a time-shifting map showing the population of each area on a color scale. The time change could change the colors as the populations change. Change the backend XML data, and the SVG automatically changes to accommodate.
SVG can also be used in more Flash-like ways, for creating menu systems, General website navigation, and even complete websites. Adobe has an excellent resource to show some of the possibilities: Transformation of Chemical Data into a 3D molecule, Charting and Graphing, Theater ticket purchasing, even a vector-based drawing application that creates SVG content.
Installation of the Adobe SVG viewer is easy. Visit Adobe’s SVG download website, and download the viewer appropriate for your operating system, then run the executable. Upon viewing your first SVG, a license agreement prompt will appear. It’s that simple.
Try SVG for yourself. You might find that you enjoy the ability to edit the markup by hand and to transform your XML data directly into a graphical format, without losing any control.
Resources
Websites of a few SVG Developers:
http://www.pinkjuice.com/
http://www.kevlindev.com/
http://www.svgnotebook.com/
SVG Wiki
Other SVG Websites:
Adobe SVG Zone
Adobe SVG Viewer
Adobe SVG Examples
W3C SVG Specification