Wrapping up SVG
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.
<text style="fill:blue;" y="15">Gearhead was here.</text>
<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="http://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');
By the way, you'll find on the Adobe site 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" - 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?
A promising SVG tool in the beta stage is Jasc WebDraw, 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 email@example.com.
The other SVG articles:
Cool graphics in XML
The beauty of XML is it provides a whole new way of structuring 'stuff' that goes beyond just organizing data. ... Today, we'll look at one of the latest and most ... Network World, 6/4/01.
XML worth a thousand pics
Last week we were cruel and unusual - we gave you a chunk of Scalable Vector Graphics code but put off explaining it until this week.
Ready for animation
Last week we looked at a subset of the drawing features of the thoroughly marvelous standard-in-the-making, Scalable Vector Graphics. As you could see, creating graphics ... Network World, 6/18/01.