Introduction to Week 3: Dynamism and Animation

This week's topics are a bit complex and to be truthful, we will be providing just a superficial look into two of the rather complex ones: filters and SMIL animation.

Let me begin with a personal anecdote that may give a sense of what I mean. If you don't like personal anecdotes, please skip. It is not crucial to your understanding!

Three years ago,  I went to Tokyo for the 5th International SVG Open. I had proposed to teach a workshop on SVG Filters at that conference and  was quite pleased that my workshop was accepted!  On the day of the workshop I walked into the room at Tokyo's Keio Univeristy expecting to see a sea of novices. Lo and behold the participants were not at all novices, but instead were almost exclusively members of the SVG Working Group! Instead of novices, my students were the world's experts! Nothing like a little pressure to sharpen one's focus. Somewhat to my relief I discovered that at least some of them did not really know filters "that well."  At this year's 8th International SVG Open, in Paris, I mustered my courage  and again offered a "filters workshop."  This time, the students were, primarily, novices (with a handful of experts -- no doubt present to taunt me!). In working through my three hour presentation, it became clear that not all students knew what Gaussian blur was; not all knew what convolution matrices were; and not all were conversant in Adobe Photoshop and Adobe Illustrator. Not all knew about RGB channels and alpha channels!

Nor do I expect that all of you do.

One of the workshop attendees was a friend,  Doug Schepers, who happens be the W3C contact to the SVG Working Group. Doug said that one of the problems he had with filters was in knowing which ones to use and how to combine them to produce desired effects. Then it dawned on me! Using filters  in SVG is like learning to use filters  in Adobe Photoshop: it takes scores of hours of experimentation to do either effectively. And while there are dozens of books on the use of special effects in Photoshop, there are none that focus on filters in SVG. It is a complicated topic, worthy of its own book!

In short, we'll be providing a shallow overview to some of this week's topics. But hopefully, this overview will be broad enough to give you a sense of the power that lies within. If successful you'll want to start experimenting and learning more. It will take time, so be prepared to test your own patience. The results though can be quite fascinating!

In the meantime take a look at this solution to the assignment from week 2.

And by way of transition between gradients and the first topic for week three: clipPaths,  us examine this statement from the SVG Primer's section on clipPaths and masks:
While using the stop-opacity of a gradient can allow us to appear to clip or crop an underlying image down to a smaller region in the shape of either a rectangle (in the case of linear gradients) or ellipse (in the case of radial gradients) ...
I'm not sure if that statement is as self-evident as I thought it might have been when writing the first draft of the Primer. So let's quickly examine before moving on. In particular let's use a radial gradient to restrict the appearance of a rectangular bitmap to an elliptical region.
Webster's 1911 fire engine engraving
Gradient to be used as mask
Gradient, with hole, atop fire engine
<image x="15%" width="30%" y="15%" height="30%" 
xlink:href="fireenginefromWebsters1911.gif" />
<radialGradient id="r" fy=".55" >
<stop offset=".3" stop-opacity="0"/>
   <stop offset=".8" stop-color="black" />
   <stop offset=".9" stop-color="white" />
   <stop offset="1" stop-color="brown"/>
</radialGradient>
<rect x="15%" y="15%" height="30%"
width="30%" fill="url(#r)"/>
<radialGradient id="r" fy=".55" >
    <stop offset=".3" stop-opacity="0"/>
    <stop offset=".8" stop-color="black" />
    <stop offset=".9" stop-color="white" />
    <stop offset="1" stop-color="brown"/>
</radialGradient>
<image x="15%" width="30%" y="15%" height="30%"
xlink:href="fireenginefromWebsters1911.gif" />
<rect x="15%" y="15%" height="30%"
width="30%" fill="url(#r)"/>
A simple bitmap imported into SVG through <image>A gradient with transparent center.Overlaying the two

This serves to illustrate some of the power of gradients, but it should be fairly straightforward to conclude that using linear and radial gradients (the only kind available in SVG at present) to "clip" an image down to an arbitrary shape will not be easy!