Learn what SVG filters are and what they can do.
- [Instructor] SVG filters are declarative visual effects which alter the appearance of elements in a web document. Or as I like to call it, Photoshop in code on the web. In plain language, when an SVG filter is present in a html or SVG document, and that filter is applied to an element, the browser receives instructions on how to alter that element's appearance according to what filter operations and values are declared in the filter. This filtered result only exists in the browser at the time of rendering.
It is created on the fly and does not affect the actual element it is applied on in any way. And that's the whole point of SVG filters. SVG gives us the ability to create graphics using standards-compliant markup and lets the browser render these graphics out for us. SVG filters gives us the ability to change the appearance of these graphics further without having to change the graphics themselves. This is best understood with a couple of simple examples. Let's say you have a flat SVG logo like this rectangle here and you wanna give it some depth.
Well, one way to do that is to create a drop shadow behind it. Using SVG filters, you can add this drop shadow by first grabbing the rectangle and setting it up for a Gaussian Blur, so you get a blurred edge. Then offsetting that blur to the side and finally, merging the blur and the original graphic together. Maybe you want to do something else like emboss a shape. Well, SVG filters can help you here as well. To emboss a shape you would first blur the alpha layer of that shape, then apply some lighting effects to it, composite everything together and then composite that together with the original image.
And what you end up with is this merged element that looks like it's just one element but it's actually two elements that are gliding in together and they have this nice very old school embossing effect. SVG filters can also be used to manipulate images. And this is where I think they have the most practical application right now. If you have a group of images and you need to change their appearance like turn them into gray scale or bump up their contrast or make them into duotones, like what you're seeing here. You can do this with SVG filters without having to run the image through Photoshop.
What you're seeing here is actually a full color image with some filters applied. If I doc this over to the right hand side, go into the code for this demo, and cut out the reference to the filter and save, you'll see the real image appear here. What's happening is I grab the image, apply a bunch of filters to it to swap out the colors, and what we end up with is this advanced duotone appearance. And because this is all SVG, I can now go in and change the colors inside my duotone to anything I want.
And this is the magic of SVG filters. You declare the filter behavior and then apply it to whatever element you want changed. No need to alter the graphic or the image itself. And you can reuse the filter as many times as needed within the same document. So no need to grab each image and run it through a bunch of operations in Photoshop and save it out to a separate file only to realize it was the wrong image or the wrong color and you have to do it all over again. Just add the image to the document, apply an SVG filter to it, and if need be, you can change that filter until you get the results you want for your images.
That was the elevator pitch, now to get SVG filters working in real life.
- How clipping and masking work in SVG
- The mask coordinate system
- The filter elements
- Combining filters
- Filter primitives
- Using SVG filters