|
BEGINNERS GUIDE TO FILTERS - This Page
PRIMITIVES (Coming Soon)
DO'S AND DON'TS OF FILTERS (Coming Soon)
FILTER SNIPPETS (Coming Soon)
BEGINNERS GUIDE TO FILTERS IN SVG
by Chris Andersen of the Deep Elves
This section is dedicated to the wonderful world of
using filters in your SVG projects. We will provide
information, how-to's, and filter source code for you to use
in your own projects. Please read the following articles
before using filters to gain an understanding on how they
work.
WHAT ARE FILTERS?
Well by standard
definition, a filter is anything that accepts input, makes a
change to it, and outputs the result. Like in you car, your
air filter takes in dirty dusty air, cleans out the dirt, and
passes the now clean air into your engine. Graphical filters
do the same. They are a mathematical algorithm that takes an
incoming image, applies the algorithm to it, and outputs the
change. Make sense? Sure it does.
In SVG, the mathematics are simplified for you by
being represented by a set of elements called primitives. When
you use these primitives in your SVG code, the viewers parser
does all the hard work of the algorithm for you. Every filter
you write in SVG will be a combination of 1 or more of these primitives. But how is this done? Same as explained above. You
apply your image to the first primitive, then pass the result
to the next primitive, and so on down the line.
There is of course more to this, like component
transfer's and merging, but we can cover that later.
A SIMPLE FILTER
Let's start by writing
your first filter and explaining each part of the process. We
will do this with a simple drop shadow effect for your text.
The first step is setting up your definition section in
your SVG. This is just an element that the SVG does not
process until elements within are called. Just add the
following to beginning of your SVG:
<defs>
</defs>
Now lets stick in our filter. We will start with our filter
element to define that name for this filter. The only
attribute we will deal with on the is example is the id
attribute which simply is the name it will be referenced by.
<defs>
<filter id="DropShadow">
</filter>
</defs>
Now that we have our filter defined, its time to stick in
our elements. The first step of this is to blur the Alpha
channel of the incoming graphic. For those that don't know,
the alpha channel is one of the 4 channels that vector
graphics have. The are Red, Green, Blue, and Alpha. Alpha is
basically a transparent layer you never really notice. The
other three produce the color combination's to make the image.
Ooops. Got a little side tracked there. Anyway..How do we
apply the blur? The primitive we use for this is called
Gaussian Blur. For this element we use 3 attributes. The 'in'
attribute which is where you specify what goes into the
primitive (remember the filter discussion?), 'stdDeviation'
which is a numeric value specifying how much to blur the
graphic, and finally 'result' which is what we want to name
the output (in case we need to pass it to another primitive).
The 'in' attribute has a set group of values you can use, we
will deal with 'SourceAlpha'. This means you are passing only
the alpha channel of the graphic into the primitive. Lets do it
now..
<defs>
<filter id="DropShadow">
<feGaussianBlur
in="SourceAlpha" stdDeviation="1"
result="MyBlur"/>
</filter>
</defs>
Ok so that has now produced a blur effect to the Alpha. But
it is a drop shadow, so we need to move the shadow down and to
the left to give it that 3d-ish look. For that we will use
feOffset. All it does it move the inputted image to another
position. The dx and dy attributes do this. For the 'in'
attribute, this time we use the result name we used from the
Gaussian Blur..Lets do it..
<defs>
<filter id="DropShadow">
<feGaussianBlur
in="SourceAlpha" stdDeviation="1"
result="MyBlur"/>
<feOffset
in="MyBlur" dx="3" dy="3"
result="FinalBlur"/>
</filter>
</defs>
Now for the final step. We are going to merge the blur
graphic with the original, otherwise all that shows up is the
blurred copy. We use the merge and mergenode elements. Not
much to explain here. It just merges what you type in into one
image.
<defs>
<filter id="DropShadow">
<feGaussianBlur
in="SourceAlpha" stdDeviation="1"
result="MyBlur"/>
<feOffset
in="MyBlur" dx="3" dy="3"
result="FinalBlur"/>
<feMerge>
<feMergeNode in="FinalBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
Now all you need to do is apply the filter to your graphic.
Lets use a text area. Just add the following to the style
attribute of your text element
<text style="filter:url(#DropShadow)">This
is a test</text>
And this is what it looks like..
Taaadaa.. There you have it, your first filter. Not hard at
all. We will go into some more advanced stuff later. But I
think this will give you a good start on experimenting with
your own filters.
Go ahead and experiment with this and I will see you next
time. Keep checking the filter section for new filter
examples.
|
