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:
- CSS3Editing Images in CSS: FiltersMonty Shokeen
- CSSTwo Ways to Create a Frosted Glass Effect in CSSAdi Purdila
- CSSHow to Apply Instagram Filters in the Browser Using Pure CSSAdi Purdila
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:
<svg> <filter id="demofilter"> ... </filter> <img xlink:href="" width="100" height="100" x="0" y="0" filter="url(demoFilter)"/> </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.
There are 17 primitives we can use today:
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:
<svg width="1000" height="577" viewBox="0 0 1000 577"> </svg>
Next, the filter element, with an ID:
<svg width="1000" height="577" viewBox="0 0 1000 577"> <filter id="demoFilter"> </filter> </svg>
Now we need to add an element to which we can apply our filters.
<svg width="1000" height="577" viewBox="0 0 1000 577"> <filter id="demoFilter"> </filter> <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)"/> </svg>
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 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:
<feBlend mode="color-burn" in="SourceGraphic" in2="FLOOD" result="BLEND"/>
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:
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.