Lesson 7

SVG Filters

Filters are SVG's pixel-manipulation layer. Everything covered so far - shapes, paths, gradients, clips, masks - operates on geometry and paint. Filters operate on the rendered pixels after all that geometry and paint has been rasterised. They let you blur, distort, recolour, composite, and light your graphics in ways that geometry alone can't achieve.

1. The Filter Model

A filter is a pipeline of one or more filter primitives - small, single-purpose image operations chained together. Each primitive takes one or two inputs, processes them, and produces an output. You wire these primitives together by naming their inputs and outputs.

Basic structure

<svg viewBox="0 0 300 200">
  <defs>
    <filter id="my-filter">
      <!-- Filter primitives go here -->
      <feGaussianBlur stdDeviation="3"/>
    </filter>
  </defs>

  <!-- Apply the filter -->
  <rect width="200" height="100" fill="coral"
        filter="url(#my-filter)"/>
</svg>

The filter region

Every filter has a filter region - the rectangular area in which the filter operates. By default, it extends 10% beyond the element's bounding box in each direction (same as masks):

<filter id="my-filter" x="-10%" y="-10%" width="120%" height="120%">
  <!-- primitives here -->
</filter>

These four values define a rectangle, not a symmetric padding. The x/y set where the region starts (relative to the bounding box origin), and width/height set how far it extends. The right edge is at x + width = -10% + 120% = 110%, i.e. 10% beyond the right edge of the bounding box. Same logic vertically. The result is 10% extra on all four sides - but you can make it asymmetric if needed (e.g. more room below for a downward shadow):

<!-- Asymmetric: 5% extra left/right/top, 25% extra at the bottom -->
<filter x="-5%" y="-5%" width="110%" height="130%">
  <feDropShadow dx="0" dy="10" stdDeviation="4"/>
</filter>

This padding is necessary because many filter effects (like blur) expand the visual footprint of an element. If the filter region were exactly the bounding box, blurred edges would get clipped. You can override these values when you need more (or less) space.

<filter> element attributes

Inputs and outputs: the wiring model

Each filter primitive can take named inputs (in) and produce named outputs (result). This is how you chain primitives into a pipeline:

<filter id="drop-shadow">
  <!-- Step 1: blur the source graphic -->
  <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blurred"/>

  <!-- Step 2: offset the blurred result -->
  <feOffset in="blurred" dx="3" dy="3" result="shadow"/>

  <!-- Step 3: composite the original on top of the shadow -->
  <feMerge>
    <feMergeNode in="shadow"/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>

Built-in input keywords (implicit - you never define these)

When a filter runs, the browser automatically creates these named images and makes them available as inputs. They're reserved names, not something you declare:

• SourceGraphic - the full rendered element (colour + alpha) before any filter processing
• SourceAlpha - only the alpha channel of the source (a silhouette - opaque where the element exists, transparent elsewhere). Perfect for generating shadows.
• BackgroundImage / BackgroundAlpha - the rendered content behind the filtered element (rarely used; requires enable-background and has poor browser support)
• FillPaint / StrokePaint - the element's fill or stroke colour as a flat pixel buffer (useful for lighting effects)

<!-- Explicit wiring (verbose but clear) -->
<filter id="a">
  <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blurred"/>
  <feOffset in="blurred" dx="3" dy="3" result="shadow"/>
</filter>

<!-- Implicit wiring (identical behaviour) -->
<filter id="b">
  <feGaussianBlur in="SourceAlpha" stdDeviation="4"/>
  <feOffset dx="3" dy="3"/>
</filter>

You only need explicit in/result names when the pipeline branches - when a primitive needs to reference something other than "the previous output." Without names, implicit chaining gives you a straight line (A→B→C). But real filter pipelines often aren't straight lines:

SourceAlpha → feGaussianBlur → feOffset → ┐
                                            ├→ feMerge → output
SourceGraphic ─────────────────────────────┘

Here feMerge needs two inputs: the offset blur (the thing above it) and the original SourceGraphic (which is not "the previous output" - it's a completely different stream). Without explicit names, there's no way to express this.

Concretely, you need in/result when:

Case 1: Reaching back (not "the one above me")

The drop shadow: feMerge needs the original SourceGraphic, which isn't the previous output - the previous output is the offset shadow.

<filter id="shadow">
  <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
  <feOffset in="blur" dx="3" dy="3" result="shadow"/>
  <feMerge>
    <feMergeNode in="shadow"/>        <!-- previous output ✓ -->
    <feMergeNode in="SourceGraphic"/>  <!-- reaches BACK to the original -->
  </feMerge>
</filter>

SourceAlpha → feGaussianBlur → feOffset ──→ ┐
                                             ├→ feMerge → output
SourceGraphic ───────────────────────────────┘
                              (reaches back)

Case 2: Fan-out (two primitives consume the same result)

Suppose you want both a blurred shadow and a colour-shifted copy from the same blur operation:

<filter id="fan-out">
  <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blurred"/>

  <!-- Branch A: offset the blur -->
  <feOffset in="blurred" dx="4" dy="4" result="shadow"/>

  <!-- Branch B: hue-rotate the SAME blur -->
  <feColorMatrix in="blurred" type="hueRotate" values="90" result="tinted"/>

  <!-- Merge both branches + original -->
  <feMerge>
    <feMergeNode in="shadow"/>
    <feMergeNode in="tinted"/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>

                        ┌→ feOffset ────────→ ┐
SourceGraphic → feBlur ─┤                      ├→ feMerge → output
                        └→ feColorMatrix ──────┤
SourceGraphic ─────────────────────────────────┘
                (fan-out: both read "blurred")

Case 3: Two-input primitives (in + in2)

Primitives like feComposite, feBlend, and feDisplacementMap require two explicit inputs. Implicit chaining can only provide one (the previous output), so you must name the other:

<filter id="two-inputs">
  <!-- Generate noise -->
  <feTurbulence baseFrequency="0.03" result="noise"/>

  <!-- Displace SourceGraphic USING the noise -->
  <feDisplacementMap in="SourceGraphic" in2="noise"
    scale="15" xChannelSelector="R" yChannelSelector="G"/>
</filter>

feTurbulence ────────→ (noise) ─────────→ in2 ┐
                                               ├→ feDisplacementMap → output
SourceGraphic ─────────────────────────→ in   ┘
          (two separate streams into one primitive)

2. The 17 Filter Primitives

SVG defines exactly 17 filter primitives. Each does one specific operation. Here's the complete set, grouped by function:

We'll cover the most important ones in depth. The rest follow the same pattern - once you understand the wiring model and a few core primitives, the others are straightforward to pick up from the reference doc.

3. feGaussianBlur

The workhorse filter primitive. It blurs the input by a specified radius using a Gaussian (bell curve) distribution. The stdDeviation attribute controls the blur radius - larger values = more blur. It accepts one or two values:

• One value (stdDeviation="5") - equal blur in both x and y (isotropic, soft glow)
• Two values (stdDeviation="8 0") - first is x-blur, second is y-blur. This lets you blur in one direction only (motion blur) or weight the axes differently.

<filter id="blur-example">
  <!-- Single value: equal blur in x and y -->
  <feGaussianBlur stdDeviation="5"/>

  <!-- Two values: different blur for x and y (motion blur effect) -->
  <feGaussianBlur stdDeviation="8 0"/>
</filter>

Attributes

4. Building a Drop Shadow (The Classic Pipeline)

Drop shadows are the "hello world" of filter pipelines. They combine three primitives in sequence, and understanding this chain teaches you 80% of what you need to know about filter wiring:

1. feGaussianBlur on SourceAlpha - creates a blurred silhouette
2. feOffset - shifts the blurred silhouette down and to the right
3. feMerge - layers the original graphic on top of the shadow

<filter id="drop-shadow">
  <!-- 1. Blur the alpha channel (silhouette) -->
  <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>

  <!-- 2. Offset the blurred shadow -->
  <feOffset in="blur" dx="4" dy="4" result="shadow"/>

  <!-- 3. Layer: shadow behind, original on top -->
  <feMerge>
    <feMergeNode in="shadow"/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>

Why SourceAlpha and not SourceGraphic?

If you blur SourceGraphic, the shadow retains the element's colours - you'd get a coloured halo rather than a dark shadow. SourceAlpha gives you a black silhouette (all the alpha but no colour), which is what shadows look like in the real world.

Adding colour to the shadow

The manual pipeline above produces a black shadow. To colour it, insert an feFlood + feComposite step:

<filter id="coloured-shadow">
  <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
  <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>

  <!-- Flood with desired shadow colour -->
  <feFlood flood-color="rgba(97, 175, 239, 0.5)" result="colour"/>

  <!-- Clip the flood to the shadow shape -->
  <feComposite in="colour" in2="offsetBlur" operator="in" result="shadow"/>

  <feMerge>
    <feMergeNode in="shadow"/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>

5. feDropShadow (The Shorthand)

SVG 2 introduced feDropShadow as a convenience primitive that combines the blur + offset + coloured shadow into a single element. It does the same thing as the manual pipeline above, but in one line:

<filter id="easy-shadow">
  <feDropShadow dx="3" dy="4" stdDeviation="4"
                flood-color="rgba(0,0,0,0.4)"/>
</filter>

Attributes

6. feColorMatrix

This is SVG's colour Swiss Army knife. It applies a 4×5 matrix transformation to every pixel's RGBA values. It can do hue rotation, saturation changes, colour channel swapping, and more - all in one primitive.

The matrix

The matrix is applied to each pixel's [R, G, B, A, 1] vector. The result is a new [R', G', B', A']:

| R' |   | a00 a01 a02 a03 a04 |   | R |
| G' | = | a10 a11 a12 a13 a14 | × | G |
| B' |   | a20 a21 a22 a23 a24 |   | B |
| A' |   | a30 a31 a32 a33 a34 |   | A |
                                    | 1 |

The 5th column (a04, a14, a24, a34) adds constant offsets - these let you brighten/darken without a multiplication.

Shorthand types

Instead of writing all 20 matrix values, you can use the type attribute for common operations:

<!-- Desaturate (greyscale) -->
<feColorMatrix type="saturate" values="0"/>

<!-- Half saturation -->
<feColorMatrix type="saturate" values="0.5"/>

<!-- Hue rotate by 90 degrees -->
<feColorMatrix type="hueRotate" values="90"/>

<!-- Invert alpha (used for knockout effects) -->
<feColorMatrix type="matrix"
  values="1 0 0 0 0
          0 1 0 0 0
          0 0 1 0 0
          0 0 0 -1 1"/>

The identity matrix

The "do nothing" matrix (useful as a starting point for understanding):

1 0 0 0 0    <!-- R' = 1*R + 0*G + 0*B + 0*A + 0 -->
0 1 0 0 0    <!-- G' = 0*R + 1*G + 0*B + 0*A + 0 -->
0 0 1 0 0    <!-- B' = 0*R + 0*G + 1*B + 0*A + 0 -->
0 0 0 1 0    <!-- A' = 0*R + 0*G + 0*B + 1*A + 0 -->

Modify individual cells to channel-swap, tint, or adjust brightness. For instance, swapping R and B channels:

<feColorMatrix type="matrix"
  values="0 0 1 0 0
          0 1 0 0 0
          1 0 0 0 0
          0 0 0 1 0"/>

Attributes

7. feComposite & feMerge

These two primitives control how multiple images are combined.

feMerge - simple layering

feMerge stacks inputs on top of each other in order (first feMergeNode is the bottom layer, last is the top). It's the filter equivalent of SVG's natural paint order - later elements draw on top.

<feMerge>
  <feMergeNode in="background-effect"/>   <!-- bottom -->
  <feMergeNode in="middle-effect"/>        <!-- middle -->
  <feMergeNode in="SourceGraphic"/>        <!-- top -->
</feMerge>

feComposite - Porter-Duff operations

feComposite combines exactly two inputs using compositing operators. The operator attribute selects the mode:

feComposite attributes

feMerge attributes

Contains one or more <feMergeNode> children:

feOffset attributes

feFlood attributes

8. feTurbulence - Generating Noise

feTurbulence generates procedural noise (Perlin noise or fractal turbulence) without any input - it creates pixels from nothing. Combined with feDisplacementMap, it can create organic distortion effects (water ripples, paper texture, fire).

<filter id="noise">
  <feTurbulence type="fractalNoise"
    baseFrequency="0.05" numOctaves="3" seed="42"/>
</filter>

<filter id="turbulence">
  <feTurbulence type="turbulence"
    baseFrequency="0.02" numOctaves="4"/>
</filter>

Key attributes at a glance (full table below the demos):

Using noise for distortion

Combine feTurbulence with feDisplacementMap to distort an element organically:

<filter id="wavy">
  <feTurbulence type="turbulence" baseFrequency="0.02"
    numOctaves="2" result="noise"/>
  <feDisplacementMap in="SourceGraphic" in2="noise"
    scale="15" xChannelSelector="R" yChannelSelector="G"/>
</filter>

feTurbulence attributes

feDisplacementMap attributes

9. Lighting Effects

SVG filters include a lighting model with two surface types and three light source types. Combined, they can create embossed, raised, or 3D effects on flat 2D shapes.

Surface types

• feDiffuseLighting - matte surface (Lambertian reflection). Light scatters evenly in all directions. The result is a smooth, clay-like appearance.
• feSpecularLighting - shiny surface (Phong-like specular highlights). Light reflects directionally, creating bright hotspots. Think plastic or metal.

Light sources (nested inside lighting elements)

• feDistantLight - parallel rays from a direction (like the sun). Defined by azimuth and elevation angles.
• fePointLight - omnidirectional from a position (like a bare bulb). Defined by x, y, z.
• feSpotLight - cone of light from a position aimed at a target. Has pointsAtX/Y/Z, limitingConeAngle, and specularExponent.

How it works

Lighting primitives use the alpha channel of their input as a height map (bump map). Brighter alpha = higher surface. The lighting calculation then determines how light would illuminate this bumpy surface, producing a lit image. You typically:

1. Feed the element's alpha (or a noise texture) as input
2. Apply the lighting primitive to generate a lit surface
3. Composite the lighting result with the original using feComposite operator="arithmetic"

<filter id="emboss">
  <!-- Use source alpha as the bump map -->
  <feDiffuseLighting in="SourceGraphic" surfaceScale="3"
    diffuseConstant="1" lighting-color="white" result="light">
    <feDistantLight azimuth="225" elevation="45"/>
  </feDiffuseLighting>

  <!-- Combine lighting with original -->
  <feComposite in="SourceGraphic" in2="light"
    operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/>
</filter>

feDiffuseLighting attributes

feSpecularLighting attributes

Light source elements

10. feMorphology - Erode and Dilate

feMorphology shrinks (erode) or expands (dilate) the shape boundaries. It's like a variable-width stroke that can also be used to create outlines, bold text effects, or to thicken/thin elements.

<!-- Thicken (dilate) by 2 units -->
<filter id="thick">
  <feMorphology operator="dilate" radius="2"/>
</filter>

<!-- Thin (erode) by 1 unit -->
<filter id="thin">
  <feMorphology operator="erode" radius="1"/>
</filter>

Outline text trick

Combine dilate + original to create a text outline effect (dilate creates the "stroke", then layer the original on top as the fill):

<filter id="text-outline">
  <feMorphology in="SourceGraphic" operator="dilate"
    radius="2" result="expanded"/>
  <!-- Colour the expanded area -->
  <feFlood flood-color="#e06c75" result="outlineColor"/>
  <feComposite in="outlineColor" in2="expanded"
    operator="in" result="outline"/>
  <!-- Layer: outline behind, original on top -->
  <feMerge>
    <feMergeNode in="outline"/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>

Attributes

11. A Real-World Example: Glow Effect

Combining blur, colour, and compositing - here's a neon glow effect. The approach: blur the source graphic (creates a coloured halo), then layer the crisp original on top:

<filter id="glow">
  <!-- Blur the source to create the glow halo -->
  <feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur"/>

  <!-- Brighten the blur (optional: boost glow intensity) -->
  <feColorMatrix in="blur" type="matrix"
    values="1 0 0 0 0
            0 1 0 0 0
            0 0 1 0 0
            0 0 0 2 0"
    result="brightBlur"/>

  <!-- Layer: glow behind, sharp original on top -->
  <feMerge>
    <feMergeNode in="brightBlur"/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>

12. Performance & Practical Advice

• Filters are expensive. Every filtered element gets its own offscreen raster buffer. The browser must rasterise the element, run all primitives, then composite the result. Avoid filters on elements that animate at 60fps unless GPU-composited (or use CSS filter for simple cases).
• CSS filter vs SVG filter: CSS provides shortcuts for common filters: filter: blur(5px) drop-shadow(3px 3px 5px black) saturate(1.5). These are typically GPU-accelerated - the browser runs them as GPU shaders on a compositor layer (same pipeline as transform and opacity), so they don't block the main thread. SVG filters run during the CPU paint step and process primitives sequentially. The visual result is identical, but CSS filters animate more cheaply. Trade-off: CSS filter only offers a fixed set of predefined effects, while SVG filters give you full pipeline control (17 primitives, arbitrary chaining). Use CSS filter for simple effects on animated elements; use SVG filter when you need the full power or are working inside a self-contained SVG.
• filterUnits: userSpaceOnUse (filter region in element's coordinate system) vs objectBoundingBox (default; region as fraction of bounding box). For reusable filters that work on different-sized elements, the default objectBoundingBox is usually what you want.
• primitiveUnits: Controls the coordinate system for individual primitive attributes (like stdDeviation, radius, scale). Default is userSpaceOnUse, which means blur radius etc. are in the element's coordinate units.
• Debugging tip: To see what a specific intermediate result looks like, temporarily make it the final output by removing subsequent primitives. Or use an feMerge at the end that only references the intermediate result name you want to inspect.

13. Combining Filters with Other SVG Features

Filters play well with everything covered in preceding lessons:

• Filters + Clips: Apply clip-path before filtering (the element is clipped, then the clipped result is filtered). Or filter first, then clip the result using CSS clip-path on the element.
• Filters + Masks: Similar to clips. The mask is applied, producing a partially-transparent element, which is then fed into the filter pipeline.
• Filters + Groups: Apply filter to a <g> element to filter the entire group as one composited image. This is efficient and lets you create effects that span multiple shapes.
• Filters + Animation (SMIL): You can animate filter primitive attributes with SMIL! Animate stdDeviation for a focus/unfocus effect, or baseFrequency in feTurbulence for animated noise. (We'll explore this in Lessons 9–10.)

14. Remaining Primitives - Attribute Reference

The following primitives don't have dedicated sections above but are useful to know. Every filter primitive also supports the common attributes in, result, x, y, width, height (to define its sub-region within the filter).

feComponentTransfer

Per-channel transfer functions. Contains child elements <feFuncR>, <feFuncG>, <feFuncB>, <feFuncA>:

feBlend

feTile

feConvolveMatrix

feImage

Quiz: Check Your Understanding

Hands-On Exercise

Build these from scratch to cement the concepts:

1. Drop shadow: Create a manual drop shadow pipeline (feGaussianBlur on SourceAlpha → feOffset → feMerge). Apply it to a shape and text element.
2. Colour manipulation: Use feColorMatrix type="hueRotate" to shift an element's colours by 120 degrees. Then try type="saturate" values="0" for greyscale.
3. Glow effect: Build a neon glow filter (blur SourceGraphic, boost alpha with feColorMatrix, merge with original). Don't forget to enlarge the filter region.
4. Distortion: Combine feTurbulence with feDisplacementMap to warp a rectangle or text with organic noise.

<svg width="600" height="500" viewBox="0 0 600 500"
     xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- 1. Drop shadow -->
    <filter id="ex-shadow">
      <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
      <feOffset in="blur" dx="4" dy="4" result="shadow"/>
      <feMerge>
        <feMergeNode in="shadow"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>

    <!-- 2. Hue rotation -->
    <filter id="ex-hue">
      <feColorMatrix type="hueRotate" values="120"/>
    </filter>

    <!-- 3. Glow -->
    <filter id="ex-glow" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
      <feColorMatrix in="blur" type="matrix"
        values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 2 0"
        result="brightBlur"/>
      <feMerge>
        <feMergeNode in="brightBlur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>

    <!-- 4. Distortion -->
    <filter id="ex-warp">
      <feTurbulence type="turbulence" baseFrequency="0.03"
        numOctaves="2" result="noise"/>
      <feDisplacementMap in="SourceGraphic" in2="noise"
        scale="15" xChannelSelector="R" yChannelSelector="G"/>
    </filter>
  </defs>

  <!-- 1. Shadow -->
  <rect x="20" y="20" width="120" height="80" rx="8"
        fill="coral" filter="url(#ex-shadow)"/>

  <!-- 2. Hue rotate -->
  <rect x="200" y="20" width="120" height="80" rx="8"
        fill="coral" filter="url(#ex-hue)"/>

  <!-- 3. Glow -->
  <text x="300" y="220" font-size="36" fill="#61afef"
        filter="url(#ex-glow)">GLOW</text>

  <!-- 4. Distortion -->
  <text x="50" y="400" font-size="36" fill="#e5c07b"
        filter="url(#ex-warp)">Warped Text</text>
</svg>