Advertisement
  1. Web Design
  2. SVG
Webdesign

Introduction to SVG Filters

by
Difficulty:IntermediateLength:ShortLanguages:

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:

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:

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:

Next, the filter element, with an ID:

Now we need to add an element to which we can apply our filters. 

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:

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:

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

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.