Welcome to Nick Nagel .com

SVG Animation Trick

a tip by Dr. Nick

Overview

If you are reading this page then you may have noticed the disappearing Cheshire cat on the upper corner of this content box. On the surface the drawing may seem nothing special ~~ yet another borrowing from Lewis Carroll's ubiquitously famous "Alice in Wonderland". But what you might find interesting about this little web-graphic is what lies beneath the surface ~~ specifically, the technology I used to create it.

This little Easter egg is a quick trick I whipped up while exploring SVG animation. SVG (for Scalable Vector Graphics) is perhaps one of the most underrated of the dynamic web standards available today. Let me explain what I mean. You may well know that dynamic HTML is a collection of web standards and technologies designed to enable standards-based interactive and animated Web development. But what many folks know less is that while some dHTML technologies seem to've taken root and exploded onto the scene over the past decade++ (I'm thinking of HTML, CSS and Javascript here), others have been slower on the uptake (such as e.g., xHTML, SVG, SMIL and others). To me that's really a shame. Because xHTML takes all the best things from HTML and brings the beauty of well-formedness, well-definedness, and validation to the world of mark-up generation. xHTML is so beautiful compared to it's ugly old aunt HTML that at one point the W3C consortium was advocating re-writing the entire World Wide Web in xHTML! Seriously.

But I digress. The point here is that while SVG has been neglected for a long time, it will soon be blossoming and coming into its own as a valuable addition to browser-based presentation languages. The reason for this is that more and more browsers are providing support for SVG and tools are pesently emerging geared specifically for SVG content development.

So, with that in mind, I present this little trick here for folks getting their feet wet and exploring some of what this rich standard has to offer.

The technique that I present here illustrates some important key points:

  1. SVG used in concert with xHTML, CSS and Javascript raises web-based presentation to new heights. Think of doing curves in pure, standards compliant mark-up (as opposed to using kludgy ugly workarounds like blending images with text and substituting images for parse-able text).

    dHTML = xHTML + CSS + Javascript + SVG/SMIL + ...

  2. SVG can be directly and easily woven into xHTML documents using XML namespaces (a truly beautiful concept).

  3. Given points one and two above, SVG nicely completes pure, standards-based graphics design for the WWW with; (1) the capability to specify shapes and curves using WWW standards (thus rounding out CSS), and (2) to provide animated content without the need for non-standard plug-ins.

Technique

But enough pre-amble. Let's get to the meat of it. OK so how does Cheshire do his trick?

First, we have to draw him. Although simple shapes and objects could, in principle, be handcrafted in SVG, to do any reasonably complex art you really need an SVG tool. As of this writing, the best SVG tool out there is Inkscape. And as it turns out Inkscape is open source and available for free. So there's no excuse for you not to download your own executable and start drawing today...

When you draw Ches (or whatever other image you want to apply the fade effect to) make sure to divide him up into layers1. In this case, I have two separate layers; one for the grin, and one for everything else. You'll see why in a bit.

Once you have the image, you'll have to do a bit of tweaking to get the animation2. So, after you've worked all the kinks out of your drawing comes the next stage in the workflow: adding the animation tweaks (and this is the heart of today's trick).

To add the animation, you'll need to manually edit the SVG XML. Inkscape has it's own on-board XML editor, but I prefer to close out of Inkscape and just do the manual editing in Text-pad (of course, any text editor will work just fine).

Procedure

SVG includes a number of animation tags from the SMIL standard. A full exposition is beyond the scope of this article, but you can see the spec itself for the complete set (it's great bed-side reading ~~ if you suffer from insomnia!). Once you've got the raw SVG, adding animation effects is as easy as 1, 2, 3!

  1. Add the x-link namespace. SVG decouples animation instructions from their targets. To link the instructions to their target you'll use xlink:href attributes, hence the need of the namespace. Inkscape doesn't include the namespace by default (as of version 0.46 anyway) so you'll have to add it to the Inkscape generated SVG. Add it to the SVG root element as illustrated below:

    <svg
       ...
       xmlns:svg="http://www.w3.org/2000/svg"
       xmlns="http://www.w3.org/2000/svg"
       ...
       xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
       xmlns:xlink="http://www.w3.org/1999/xlink"
       width="172"
       height="102"
       id="svg2"
       ...
    >
        

    The above code fragment shows the SVG root element with the xlink namespace attribute I added called out in bold. I've left some of the other attributes of interest in the example for context.

  2. Next, you'll have to tweak the Inkscape generated code a bit. Locate the 'g' element (the SVG "layer") that will be the target of the animation ~~ the fade effect. Change it to a 'symbol' element (trust me ~~ don't ask why just use my forum if you want the full explanation).

    <symbol
       inkscape:groupmode="layer"
       id="layer4"
       inkscape:label="body"
       style="display:inline"
       sodipodi:insensitive="true"
       opacity="1">    
        

    Also, add the opacity attribute as shown above. This is the parameter you'll manipulate to achieve the animation.

  3. Finally, add the animation instructions. Insert the animation tags right after the ~symbol~ as follows:

    <use xlink:href="#layer4" >
      <animate attributeName="opacity"
               begin="mouseover"
               restart="whenNotActive"
               dur="4s"
               values="1; 0; 1" />
    </use>
        

    The 'use' element specifies the target of the animation using the xlink href attribute. The 'animate' tag holds a number of attributes representing animation parameters. 'attributeName' is the parameter to modify and can be used to move, rotate, and scale objects and, in this case, affect transparency. 'begin' specifies an event to trigger the animation (and can specify a time as well). 'restart' tells the browser only to start the animation under specific conditions. The 'duration' is a timeline for the animation, and the 'values' are the parametric values of the animation target over that duration. That's it. Animating content in SVG is that easy!

Conclusion

I hope you have found this tip useful, that it's saved you time, and maybe even money. If you'd like to play with the source code for the Cheshire cat graphic I've included it below3.

If you download the source though, please consider making a contribution to the cause. I'm trying to make an honest living off of Web developement and developers have to eat too. In any case, enjoy and happy developing!

Resources

  1. The SVG Specification

  2. Inkscape

Endnotes

1. Do note that SVG doesn't have the concept of layers per se, but rather the more generic concept of groups (expressed as the 'g' element). But Inkscape implements graphics layers by mapping the concept onto SVG groups.

2. As of this writing Inkscape does not support SVG animation. But what do you want for free, eh? Send them some money (developers have to eat too you know) and then you can complain...

3. As of this writing the latest version of Firefox (3.6) supports only a subset of SVG features. So while you may see the SVG graphic, you may not see the animated fade effect if you are using Firefox. You can see the full effect using Google Chrome, and maybe even Opera though I haven't tested the code in the latter.

image/svg+xml