From the course: SVG: Clipping, Masking, and Filters

A walkthrough of SVG filter primitives

From the course: SVG: Clipping, Masking, and Filters

Start my 1-month free trial

A walkthrough of SVG filter primitives

“

- [Morten] There are 16 SVG filter primitives, and some of them have child primitives. These primitives are defined in the SVG filter effects specifications from W3C, which contains verbose and very technical descriptions of what each primitive is, and what they do, as well as canonical examples of expected behavior. It's important to keep in mind this W3C specification is written for browser manufacturers, as much as for web developers, and just because something is documented here, does not mean it actually works in all browsers, or in some cases, any browsers. To make sense of all these filter primitives, what they do, how they work, and where their limits are, we'll go through them individually in this course. For each filter primitive, I'll give you a standardized example that you can experiment with and explain each property and what they do. You'll find all those examples in the folder named 03 in the exercise files, and each example has a folder named after the filter primitive we're looking at. Some filter primitives are best explained when used in combination with other filter primitives, and some filter primitives have fairly complex settings. In those cases, the examples may include multiple filter primitives, and, or, commented out sections of code to demonstrate different use cases. I'll also point at some useful resources to get a better idea of how some of the more complex filter primitives can be used. Each of the examples comes complete with the filter primitive name, and short description from MDN Docs, direct links to both the W3C specification, and MDN Web Docs, and a simple example. For most of them, you'll see an image with a rectangle and a string of text superimposed. All of these are part of the SVG, and all styles of these elements sit in the style.css file in the root of the exercise files folder here. As explained in the previous chapter, SVG filters can be applied in three different ways, the filter attribute, or style attribute on the element, or via a CSS rule. In these examples, I use a CSS rule, which you can find at the head of the document up here. Got it? Okay, let's get crackin'.

Contents