July 09, 2001, 10:09 AM — We promised to wrap up the topic of Scalable Vector Graphics and we'll do so discussing scripted animation. When we started with SVG a few weeks ago we discussed its use of declarative animation, where the animation is defined in the SVG file using Synchronized Multimedia Integration Language. While you can achieve a fantastic amount using declarative animation, you cannot interact with the user or anything outside the SVG graphic.
This is where scripted animation comes into play -- specifically, JavaScript-driven animation. To manipulate SVG using JavaScript, we can embed the SVG graphic in the document that contains the JavaScript or embed the JavaScript in the SVG code. Either way, the key to scripting is to name all the elements we want to manipulate. For instance, in the second example we gave, we used the line:
<.text style="fill:blue;" y="15">Gearhead was here.<./text>
So to access this with JavaScript, we first have to do the following:
<.text id="ghtext" style="fill:blue;" y="15">Gearhead was here.<./text>
Next, assuming we're going to drive SVG display embedded in a document, we'd have to embed the SVG file in the body of the HTML document like this:
<.EMBED NAME="mydoc" WIDTH="800" HEIGHT="600" SRC="www.gibbs.com/jsanim.svg">
The NAME argument provides an identity for the embedded document. Now we need to get pointers to the document and the element we want to change:
var svgdocument = document.my doc.getSVGDocument();
svgtext = svgdocument.getElement ById('ghtext');
svgtext.setattribute('style','fill:red');
All we have provided is a glimpse of the mechanism used to animate SVG with JavaScript. The actual implementation is a little more complex, and we refer you to the Adobe tutorial (www.adobe.com/svg/basics/intro.html) for lots of code and examples.
By the way, you'll find on the Adobe Systems Inc. site (www.adobe.com/svg/) that a number of the examples use the function getstyle(). This turns out to be undesirable because, according to Jon Ferraiolo, SVG editor for Adobe Systems, "getStyle() is not part of the SVG spec" (see http://lists.w3.org/Archives/Public/wwwsvg/2000May/0092.html) -- hence our use of setattribute() above.
The point is to give you a taste of what is required to create animated SVG images. But one problem remains -- how do you create the pictures?
Gearhead has been playing with Adobe's Illustrator 9.0, which, handily enough, can export SVG. As an illustration tool, the software is fantastic. The only letdown is on the SVG side. You can't import SVG files, and the JavaScript editing really only lets you attach JavaScript to elements. You'll have to go in afterward and refine your code.
A promising SVG tool in the beta stage is Jasc WebDraw (www.jasc.com/webdraw.asp), which offers a built-in script editor and can import SVG files.
We expect to see Illustrator, WebDraw and many other tools evolve rapidly to provide in-depth SVG support. Mark our words, SVG is a standard that will quickly become a key component of Web content.
(Show us the graphics at gearhead@gibbs.com.)
