3 squares of different textures stacked 1 after the other

SVG Filters

Planted: Mar 2022

Tended: May 2022

Status: decay

A filter is like a machine that takes a graphic input, changes it and returns the result. The browser offers 2 types of filters, CSS and SVG. CSS filters are a subset of SVG filters. SVG filters offer a wider range of capabilities. The effects browser filter can produce can also be achieved in image editing software like Photoshop. However, browser filters have 2 advantages. They can be animated and interacted with.

Apply a Filter

A filter can be applied to a:

▪ HTML element through the CSS filter property.
▪ SVG element through the filter attribute or CSS property.

/index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            content="width=device-width, initial-scale=1"
            name="viewport" />
        <style>
            .filtered {
                filter: url(#myFilter);
            }
        </style>
    </head>
    <body>
        <svg>
            <defs>
                <filter id="myFilter">
                    ...
                </filter>
            </defs>
        </svg>

        <rect filter="url(#myFilter)" ... />

        <img class=”filtered” ... />
    </body>
</html>

Primitive

An SVG filter is made up of 1 or more filter primitives. All primitives share the same prefix: fe (short for filter effect). A primitive:

▪ takes 1 or 2 inputs,
▪ performs a fundamental graphical operation and
▪ outputs a result.

The in attribute can be:

▪ SourceGraphic: an element (example: image or text).
▪ SourceAlpha: the same as sourceGraphic, except only the alpha channel will be read. This is like passing a silhouette of the image to the filter.
▪ Result from another primitive.

Multiple Primitives

A SVG filter can be made up of multiple primtiives. You can use the result of 1 primitive as the input of the next. The following example is using the feGaussianBlur primitive to blur an image, then passing the result to the feOffset primitive, which moves it 20px to the right.

If in and result aren't specified, the result of the previous primitive is automatically used as the in of the following primitive.

2 inputs

Each filter primitive can take 1 or 2 inputs (but only ever output 1 result). The attribute for the 2nd input is in2. This example is using the feImage primitive to output an image. This and a 2nd image is used as the inputs for feComposite, which is outputing only where the images overlap.

Filter Region

The area where a filter will render to is known as the filter region. The default position and size of this region is:

/index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1" />
        <link href="index.css" rel="stylesheet">
    </head>
    <body>
        <svg>
            <defs>
                <filter
                    id="myFilter"
                    width=”110%”
                    height=”110%”
                    x=”-10%”
                    y=”-10%”
                >
                    ...
                </filter>
            </defs>
        </svg>
    </body>
</html>

The filter region can be visualized using the feFlood primitive. It fills the region with a specified color.

If the effect of your filter extends passed this region, it will result in a cut-off effect. This can be avoided by increasing the size of the region.

List of Primitives

Primitive	Description	Resources
feBlend	Blends two layers.
feColorMatrix	Changes input colors. Used for controlling hue, saturation and brightness.
feComponentTransfer	Performs remapping of color for each pixel. Used for adjusting brightness, contrast, color balance and threshold. Used with `feFuncA`, `feFuncR`, `feFuncG`, `feFuncB`. feFuncA, feFuncR, feFuncG, feFuncB: defines the transfer function for the alpha, red, green and blue component of the input graphic. Input graphic is defined in `feComponentTransfer`.
feComposite	Combines 2 inputs. ▪ Filtered (over): 'in' is placed in front of 'in2'. - Filtered (in): the overlap of 'in' and 'in2' render the 'in' graphic. - Filtered (atop): the overlap of 'in' and 'in2' render the 'in' graphic. The area of `in2` that doesn't overlap is rendered. - Filtered (out): The area of `in` that doesn't overlap `in2` is rendered. - Filtered (xor): The areas of `in` and `in2` that don't overlap is rendered. - Filtered (lighter): The sum of `in` and `in2` is rendered. - Filtered (arithmetic): used for combining the output from the `feDiffuseLighting` and `feSpecularLighting` filters with texture data. Each pixel is computed using: result = k1i1i2 + k2i1 + k3i2 + k4. i1 and i2 indicate the corresponding pixel channel values of the input image, which map to in and in2 respectively. k1, k2, k3, and k4 indicate the values of the attributes with the same name.
feConvolveMatrix	Combines pixels in the input image with neighboring pixels. Used for blurring, sharpening, embossing and beveling.
feDisplacementMap	Used to contour an image to a texture.
feflood	Fills the filter region with a color.
feGaussianBlur	Blurs the input image.
feImage	The filter version of the `image` element (& has the same attributes). It fetches image data from an external source and provides the pixel data as output (if the external source is an SVG, it is rasterized).
feMerge	Applies filter effects concurrently instead of sequentially. Used with `feMergeNode`
feMergeNode	Takes the result of another filter.
feMorphology	Erodes or dilates the input image. Used for fattening or thinning.
feOffset	Translates the image. Used for creating shadows.
feTile	Fill a target rectangle with a repeated, tiled pattern of the input image.
feTurbulence	Creates an image using the Perlin turbulence function. Used for make textures.
feDiffuseLighting	Lights an image using the alpha channel as a bump map. Used with `fePointlight` and `feSpotlight`. ▪ fePointlight: defines a light source which allows to create a point light effect. - feSpotlight: defines a light source.
feSpecularlighting	Lights an image using the alpha channel as a bump map. The resulting image is an RGBA image based on the light color. The lighting calculation follows the standard specular component of the Phong lighting model. The resulting image depends on the light color, light position and surface geometry of the input bump map. The result of the lighting calculation is added. The filter primitive assumes that the viewer is at infinity in the z direction.Produces an image which contains the specular reflection part of the lighting calculation. Used with a texture using the `add` term of the arithmetic `feComposite` method. Used with `fePointlight` and `feSpotlight`.`fePointlight` defines a light source which allows to create a point light effect. `feSpotlight` defines a light source.