In this tutorial we’re going to explore the world of SVG filters. With SVG filters you can create unique text effects, image effects, and with a little JavaScript some really interesting dynamic fractal effects.
Video: SVG Filters
In this Tutorial
Here’s what we’ll cover:
- What Are SVG Filters?
- The Filter Element and Filter Primitives
- Applying an SVG Filter Effect (Demo)
- Browser Support
What Are SVG Filters?
To understand what SVG filters are, let’s first look at CSS filters. In CSS we have certain functions we can use to add blur, drop-shadows, and color operations (such as change the hue, saturation, brightness and so on). You can learn more about these CSS filters in the following tutorials:
Editing Images in CSS: Filters
Two Ways to Create a CSS Frosted Glass Effect
How to Apply Instagram Filters in the Browser Using Pure CSS
CSS filters are great, but they’re quite limited. You can really only use them extensively with bitmap images, and what you can do is fairly uncomplicated. If you need something more advanced, you need to turn your attention to SVG filters instead.
Note: CSS filters are actually a subset of SVG filters. Believe it or not, SVG filters have been around since 2007!
CSS filters are more commonly heard of since they’re easier to implement. However, where with CSS filters we might apply a blur to an image, with SVG filters we can apply a horizontal blur, as well as other types.
Important: SVG filters can be applied to any HTML element.
The Filter Element and Filter Primitives
To create SVG filters we use the filter() element, and special functions which we call filter primitives. We begin with an <svg> and define a filter (with an ID) inside that:
1 |
<svg>
|
2 |
<filter id="demofilter"> |
3 |
... |
4 |
</filter>
|
5 |
|
6 |
<img xlink:href="" width="100" height="100" x="0" y="0" filter="url(demoFilter)"/> |
7 |
</svg>
|
Within the filter we add the precise filter primitives we need (more on that in a moment) and finally we create the elements that we want to influence, using the filter="" attribute and referencing the ID we created.
Primitives
There are 17 primitives we can use today:
<feGaussianBlur><feDropShadow><feMorphology><feDisplacementMap><feBlend><feColorMatrix><feConvolveMatrix><feComponentTransfer><feSpecularLighting><feDiffuseLighting><feFlood><feTurbulence><feImage><feTile><feOffset><feComposite><feMerge>
Notice the fe prefix on all of them. That stands for filter effect. These primitives allow us to create simple effects like drop-shadow, but also Photoshop-grade effects like color blending, displacement maps, and more.
Applying an SVG Filter Effect
Begin with an <svg> element, give it some dimensions (these happen to match the dimensions of an image I’m going to use) and a viewbox:
1 |
<svg width="1000" height="577" viewBox="0 0 1000 577"> |
2 |
</svg>
|
Next, the filter element, with an ID:
1 |
<svg width="1000" height="577" viewBox="0 0 1000 577"> |
2 |
<filter id="demoFilter"> |
3 |
|
4 |
</filter>
|
5 |
</svg>
|
Now we need to add an element to which we can apply our filters.
1 |
<svg width="1000" height="577" viewBox="0 0 1000 577"> |
2 |
<filter id="demoFilter"> |
3 |
|
4 |
</filter>
|
5 |
|
6 |
<image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/17119/redcharlie-k2zWqv_yfNM-unsplash.jpg" width="100%" height="100%" x="0" y="0" filter="url(#demoFilter)"/> |
7 |
</svg>
|
Primitives
Then inside our <filter> we place some filter primitives. I would like to firstly add a color filter, then after that apply a blending mode filter. So the first one uses the feFlood primitive:
1 |
<feFlood flood-color="#2da0fb" flood-opacity="1" result="FLOOD"/> |
Here we’ve defined a color, an opacity, and the result (which we define as FLOOD). What’s result? SVG filters can be combined, so we can use the ID we define here as an entry for another primitive. We’ll add our second primitive now:
1 |
<feBlend mode="color-burn" in="SourceGraphic" in2="FLOOD" result="BLEND"/> |
This feBlend allows us to define a blending mode, and then two inputs. Our inputs are the SourceGraphic (which is the element we’re applying this all to) and FLOOD (which is the first primitive we defined.
Note: the uppercase in this example isn’t compulsory, but I like to be able to visually distinguish these values whilst I’m working.
Here’s what we end up with (fork it and play around yourself!):
For more examples please watch the video above. In it, we create the following:
Conclusion
That’s all there is to it! SVG filters are really powerful, so get stuck in and play around. You’ll be amazed what you can create.
In terms of browser support, you might be surprised to learn that SVG filters are actually better supported than CSS filters! Be warned, however: whilst different browsers might support SVG filter features, they may differ in the way that they render the end results.
More Reading
