Overview

If you are reading this page then you may have noticed the grinning cat on the upper corner of the content box. On the surface the drawing may seem nothing special -- yet another borrowing from Lewis Carroll's ubiquitously famous Alice in Wonderland. But go ahead and try moving your mouse cursor over the creature and you'll see it perform its famous magic. But what's interesting about this little web-graphic is what lies beneath the surface -- the technology I used to create it -- namely SVG.

SVG (for Scalable Vector Graphics) is perhaps one of the most underrated standards available for WWW development today. Let me explain what I mean. First, what exactly is SVG? SVG is a markup language (derived from XML) for representing vector graphics. As such, it is a text-based format for describing images that can be rendered cleanly because the underlying representation is not a bitmap, but instead is a mathematical description of the features composited to form the image. As an open Web standard SVG can be used in conjunction with other web standards including HTML, CSS, and javascript to create beautiful and engaging user experiences.

By now, many readers of this blog are likely familiar with web standards like HTML, CSS, and javascript. But surprisingly (to me anyway) far fewer folks are familiar with SVG. To my delight, however, I expect that will soon change. The reasons are that:

1. Quality browsers are increasingly providing greater support for the SVG standard, and

2. Quality low cost (even free) tools are presently emerging geared specifically toward SVG content creation.

So 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. So, with that in mind, the purpose of this post is to explore one particularly cool and interesting aspect of SVG -- animating content.

Why the Cheshire Cat?

I'm presenting this little trick here for folks getting their feet wet and exploring some of what the rich SVG standard has to offer. The techniques used to create the fading cat illusrate some key points:

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

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

3. And given one and two above, SVG nicely completes pure, standards-based graphics design for the WWW with:

   • the capability to specify shapes and curves using WWW standards (thus rounding out CSS), and

   • the capability to provide animated content without the need for non-standard plug-ins.

Technique

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

Creating the Art

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 a good 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 layers ¹. 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 animation². So, *after* you've worked all the kinks out of your drawing comes the next stage in the workflow: adding the animation.

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 a good text editor. I like Text-pad on Windows but, of course, any text editor will work just fine.

Creating the Effect

There a different ways to animate SVG. One is to use javascript to access and manipulate SVG DOM elements. But here I'm going to focus on techniques built into the SVG specification itself. Specifically, I'll be looking SVG (SMIL) animation elements. That is, 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 (and as an added benefit it's great bed-side reading -- if you suffer from insomnia!).

Short of going through the exhaustive list, getting started with the elements is really easy. A lot can be accomplished simply by applying the animate tag like so:

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.

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. Change it to a 'symbol' element.

   <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.

Conclusion

It's encouraging to me to see browsers ramping up support for SVG. As of the time of this writing any modern Web browsers worth their salt³ provide at least some support for rendering SVG.

Hopefully, the little trick I've presented here is enough to pique folks' interest and curiosity in SVG as a viable addition to web content development.

Resources

1. The SVG Specification

2. Inkscape

Endnotes

1. SVG doesn't have the concept of layers per se but Inkscape implements graphics layers by mapping the concept onto SVG groups (i.e., g elements). ↑

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. I.E. and Safari are another story...↑