Left Arrow.Back

SVG Filters

Table Of Contents

3 squares of different textures stacked 1 after the other.

How to use SVG filters. Explanations, examples, generators & tools.

Last Tended
Planted
StatusSeed
3 squares of different textures stacked 1 after the other.

Definition

A filter is like a machine that takes a graphic input, changes it & returns the result. The browser offers 2 types of filters, CSS & 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 & interacted with.

3 squares of different textures stacked 1 after the other.

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.
3 squares of different textures stacked 1 after the other.

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 &
  • outputs a result.

localhost:3000

import "./styles.css";
import "./styles.css";

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.

Normally, I would import the CSS file in index.html however I wasn't able to get that working with the bundler (maybe related to this issue).

3 squares of different textures stacked 1 after the other.

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.

localhost:3000

import "./styles.css";
import "./styles.css";

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

3 squares of different textures stacked 1 after the other.

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 & a 2nd image is used as the inputs for feComposite, which is outputing only where the images overlap.

localhost:3000

import "./styles.css";
import "./styles.css";
3 squares of different textures stacked 1 after the other.

Filter Region

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

index.js

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

localhost:3000

import "./styles.css";
import "./styles.css";

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.

localhost:3000

import "./styles.css";
import "./styles.css";
3 squares of different textures stacked 1 after the other.

List of Primitives

  • feBlend: blends two layers.
  • feColorMatrix: changes input colors. Used for controlling hue, saturation & brightness.
  • feComponentTransfer: performs remapping of color for each pixel. Used for adjusting brightness, contrast, color balance & threshold. Used with feFuncA, feFuncR, feFuncG, feFuncB.

    feFuncA, feFuncR, feFuncG, feFuncB: defines the transfer function for the alpha, red, green & blue component of the input graphic. Input graphic is defined in feComponentTransfer.

  • feComposite: combines 2 inputs.

    localhost:3000

    import "./styles.css";
    import "./styles.css";
  • feConvolveMatrix: combines pixels in the input image with neighboring pixels. Used for blurring, sharpening, embossing and beveling.
    • Just Code - Tool for finding an image's edges using feConvolveMatrix (useful for sharpening an image).
  • feDisplacementMap: Used to contour an image to a texture.

    See feDisplacementMap note.

  • feflood: fills the filter region with a color.

    localhost:3000

    import "./styles.css";
    import "./styles.css";
  • feGaussianBlur: blurs the input image.

    localhost:3000

    import "./styles.css";
    import "./styles.css";
  • 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).

    localhost:3000

    import "./styles.css";
    import "./styles.css";
  • feMerge: applies filter effects concurrently instead of sequentially. Used with feMergeNode
    feMergeNode takes the result of another filter.

    localhost:3000

    import "./styles.css";
    import "./styles.css";
  • feMorphology: erodes or dilates the input image. Used for fattening or thinning.

    localhost:3000

    import "./styles.css";
    import "./styles.css";
  • feOffset: move the image. Used for creating shadows.

    localhost:3000

    import "./styles.css";
    import "./styles.css";
  • feTile: fill a target rectangle with a repeated, tiled pattern of the input image.

    localhost:3000

    import "./styles.css";
    import "./styles.css";
  • feTurbulence: creates an image using the Perlin turbulence function. Used for make textures.

    localhost:3000

    import "./styles.css";
    import "./styles.css";

LIGHTING

  • feDiffuseLighting: lights an image using the alpha channel as a bump map. Used with fePointlight & 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 & feSpotlight.
    • fePointlight: defines a light source which allows to create a point light effect.
    • feSpotlight: defines a light source.

    localhost:3000

    import "./styles.css";
    import "./styles.css";
Source
A space ship's docking bay with various equipment.

Tools

  • SVG Filters - playground, presets & docs.
  • fffuel - generators.
  • Method Draw - SVG drawing app (to go menu: View > Source to view source code) .

Examples

Scan Lines

Primitives used:

  • feImage
  • feComposite

localhost:3000

import "./styles.css";
import "./styles.css";

Hologram

For a more sophisticated hologram effect, see here.

Primitives used:

  • feComponentTransfer
    • feFuncR
    • feFuncG
    • feFuncB
  • feGaussianBlur
  • feComponentTransfer
  • feOffset
  • feMerge
    • feMergeNode

localhost:3000

import "./styles.css";
import "./styles.css";

Distress

Primitives used:

  • feTurbulence
  • feComponentTransfer
    • feFuncA
  • feComposite

localhost:3000

import "./styles.css";
import "./styles.css";

Other