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