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 in SVG has a lot of potential. Although if that were all there was to it, then SVG wouldn't be much to get excited about.
But wait, there's more! SVG can be active! The foundations of this lie in declarative animation.
In declarative animation, the description of transformations to be applied to SVG elements are timeline events - in other words, the animations are run through in sequence and, unless otherwise stated, in parallel. They also aren't affected by events such as mouse clicks and keyboard characters.
So let's modify last week's code to include some animation:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C// DTD SVG 20000303 Stylable//EN"
"<a href="http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd</A>">
<svg xml:space="preserve" width ="3in" height="3in">
<text style="fill:blue;" y="15">Gearhead was here.
<animateColor attributeName="fill" values="red;blue;yellow;green;red"
dur="10s" repeatCount="indefinite"/>
</text>
<text font-family="serif" font-size="12pt" fill="black"
x="0" y="0"
transform="rotate(-90) translate(-100, 180) scale(1.5, 1)">
Cool.
<animate attributeName="opacity"
from="1" to="0" dur="5s" repeatCount= "indefinite" />
</text>
</svg>
Now we have the "Gearhead was here" text changing color with a 10-second cycle and the "Cool" text fading out with a 10-second cycle.
The specification for SVG's declarative animation is based on the Synchronized Multimedia Integration Language, a topic I discussed in 1998.
We can also transform elements in various ways. The matrix transformation performs scaling (larger, smaller), translation (up, down, left and right), rotation (around the origin of the view window), and skewing (like a deck of cards pushed at the top but also in the up and down direction as well as left to right). And each of those transformations is also available by itself (thus there are commands to scale and rotate).
You can also animate elements to follow paths. Check out Adobe's tutorials on transformations and path animation for more details on this.
Next week, we'll look at a cool tool for editing SVG graphics for use on your Internet and intranet Web servers.
Now some of you wrote last week about having problems with getting the example code to run, apparently mainly due to simple typos. If you send a message to svgcode2@gibbs.com, we'll reply with the code attached. If you want the first example from last week, write to svgcode1@gibbs.com.
On any other subjects, write to gearhead@gibbs.com.
RELATED LINKS
Comments and suggestions to gh@gibbs.com.
Gibbs Forum
The place to discuss Gibbs's columns.
Check out this week's edition of
Backspin for more musings from Gibbs.
Past SVG columns:
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. Network World, 6/11/01.
