SVG Filter Effects & Primitives Glossary (35+ Terms)
The W3C SVG Filter Pipeline Explained: SVG filters execute hardware-accelerated raster pixel shaders inside the browser graphics engine. They take vector shapes or bitmap graphics, pass them through a directed acyclic graph (DAG) of filter primitives, and output transformed pixels without modifying the underlying vector path geometry.
1. Filter Container & Region Coordinates Core Setup
The root SVG container that encapsulates one or more filter primitives. Referenced by elements via the CSS property filter: url(#id) or SVG attribute filter="url(#id)".
<filter id="glow" x="-20%" y="-20%" width="140%" height="140%">...</filter>Defines the coordinate system for the x, y, width, height boundaries of the filter. objectBoundingBox (default) uses fractions/percentages of the element's bounding box. userSpaceOnUse uses the current SVG viewBox coordinate system.
Specifies the coordinate system for length attributes inside individual filter primitives (such as stdDeviation, dx, dy). Defaults to userSpaceOnUse.
The clipping rectangular boundary within which the filter executes. Defaults to x="-10%" y="-10%" width="120%" height="120%". When applying wide blurs, expanding this region prevents harsh cutoffs.
Determines the color space used for pixel calculations. linearRGB (SVG default) calculates color blending in a linear gamma space, producing realistic lighting and blur transitions. sRGB applies human perceptual gamma curves.
2. Pipeline Inputs & Source Nodes Image Sources
Identifies the input graphic for a filter primitive. Can reference a standard source keyword or a named result identifier from an earlier primitive in the filter chain.
Assigns a unique string name to the output pixel buffer of a primitive so subsequent primitives can read it as an in parameter.
The original unaltered target element with all its fills, strokes, and colors before any filtering.
Contains only the alpha channel (transparency silhouette) of the target element. All color channels are set to black (rgb(0,0,0)). Essential for generating drop shadows.
Pseudo-inputs representing the fill or stroke paint server of the filtered element within the filter execution subregion.
Loads an external raster image (PNG, JPEG, WebP) or inline SVG graphic fragment directly into the filter graph pipeline. Output can be piped as a second input (in2) to displacement maps or blend nodes.
<feImage href="noise-texture.png" result="customTexture" />3. Blur, Offset & Shadow Primitives Shadows & Glows
Convolves input pixels using a Gaussian blur kernel. Controlled by stdDeviation (standard deviation in pixels).
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur" />The blur radius parameter. Can specify independent horizontal and vertical radii (e.g. stdDeviation="8 2" for directional motion blur).
Dictates how pixels outside the filter boundary are sampled during convolution. none extends transparency; duplicate clamps edges to boundary pixels.
Translates an image layer along the X and Y axes without altering its size. Used to position drop shadows.
An optimized composite primitive introduced in SVG 2 that performs blur, offset, color flooding, and merging in a single GPU pass.
<feDropShadow dx="0" dy="4" stdDeviation="6" flood-color="#000" flood-opacity="0.3" />Creates a solid rectangular plane of uniform color and opacity covering the entire filter subregion.
Tiles a smaller input graphic repeatedly across the filter subregion to create repeating vector backgrounds or patterns.
4. Color & Matrix Operations Color Grading
Transforms the RGBA color vectors of every pixel using a 4x5 affine matrix or preset algorithms (matrix, saturate, hueRotate, luminanceToAlpha).
A 20-value space-separated matrix where each row recalculates Red, Green, Blue, and Alpha: [R_out = r1*R + r2*G + r3*B + r4*A + r5].
<feColorMatrix type="matrix" values="
0.33 0.33 0.33 0 0
0.33 0.33 0.33 0 0
0.33 0.33 0.33 0 0
0 0 0 1 0" />Modulates color saturation. A value of 0 produces complete grayscale; 1 preserves original saturation; values > 1 oversaturate colors.
Rotates all pixel hues around the RGB color wheel by a specified angle in degrees.
Calculates human perceived brightness (0.2126*R + 0.7152*G + 0.0722*B) and assigns the resulting value to the output alpha channel.
Allows per-channel mathematical remapping of R, G, B, and A using lookup tables, discrete thresholds, linear multipliers, or gamma curves via child elements: <feFuncR>, <feFuncG>, <feFuncB>, <feFuncA>.
Individual channel transfer functions nested inside <feComponentTransfer>. Used to invert colors, adjust gamma curves, apply brightness offsets (slope, intercept), or create multi-level posterization effects.
<feComponentTransfer>
<feFuncR type="linear" slope="1.4" intercept="-0.1" />
<feFuncG type="linear" slope="1.4" intercept="-0.1" />
<feFuncB type="gamma" amplitude="1" exponent="0.8" />
</feComponentTransfer>5. Blending & Compositing Primitives Layer Operations
Blends two images using standard Photoshop-style blend modes: normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion.
Executes pixel-level Porter-Duff compositing operators between two input layers (over, in, out, atop, xor, arithmetic).
Calculates output pixels using the polynomial equation: pixel = k1*in1*in2 + k2*in1 + k3*in2 + k4. Widely used for combining lighting maps with textures.
Layers multiple filter effect stages on top of one another from bottom to top using simple 'over' compositing.
<feMerge>
<feMergeNode in="shadowBlur" />
<feMergeNode in="SourceGraphic" />
</feMerge>Expands (dilate) or contracts (erode) the boundaries of graphical shapes. Essential for creating stroke outlines or shrinking shadow footprints.
6. Distortion, Noise & 3D Lighting Advanced Shaders
Distorts the spatial coordinates of in based on the color values of in2. Used to produce frosted glass, heatwaves, and water ripples.
<feDisplacementMap in="SourceGraphic" in2="noise" scale="20" xChannelSelector="R" yChannelSelector="G" />Generates procedural Perlin noise directly on the GPU without external image files. Controlled by baseFrequency and numOctaves.
Calculates Lambertian diffuse reflection to render realistic 3D lighting textures on 2D vector icons using normal maps derived from alpha channels.
Calculates Phong specular highlights, producing shiny metallic or plastic reflections across icon surfaces.
Child elements placed inside lighting primitives defining light source geometry: infinite distant rays (feDistantLight), 3D point lights (fePointLight), or focused spotlights (feSpotLight).
Core 3D lighting attributes: surfaceScale controls the height elevation of the surface normal map generated from alpha channels, while specularExponent controls the tightness and shine of Phong specular highlights (higher = glossy sheen).
Applies an NxM spatial convolution matrix kernel to input pixels. Used to build edge detection (Sobel), sharpening, embossing, and custom directional blurs directly on vector graphics.
<feConvolveMatrix order="3" kernelMatrix="0 -1 0 -1 5 -1 0 -1 0" preserveAlpha="true" />7. GPU Performance & Rasterization Benchmark Hardware Cost
Filters execute raster passes on the GPU or CPU compositor thread. Understand the hardware cost before applying filters to animated icons:
| Filter Primitive | GPU Execution Cost | Memory Overhead | Animation (60 FPS) Suitability | Primary Use Case |
|---|---|---|---|---|
| feColorMatrix | Ultra Low (1 fragment pass) | Zero extra buffers | Flawless 120 FPS | Duotone tinting, dark mode color swap |
| feDropShadow | Low (Hardware optimized) | 1 intermediate surface | 60 FPS (Avoid animating dx/dy) | UI drop shadows & elevation |
| feGaussianBlur | Moderate (Two 1D convolutions) | 1 intermediate buffer | Avoid animating stdDeviation | Glows, depth-of-field, backdrop blur |
| feMorphology | Moderate | 1 buffer pass | Good for static borders | Icon stroke expansion / contraction |
| feDisplacementMap | High (Coordinate warp) | 2 input textures | Heavy on mobile GPUs | Glassmorphism refraction & ripples |
| feTurbulence | High (Perlin noise math) | Procedural generation buffer | Pre-render static noise | Grain textures, marble, smoke |
8. Frequently Asked Questions Expert Advice
What is the performance difference between CSS drop-shadow and SVG feDropShadow?
CSS filter: drop-shadow() is internally mapped by browser rendering engines to an optimized feDropShadow primitive. SVG feDropShadow allows granular control over color-interpolation-filters, flood-opacity, and dx/dy subpixel offsets within the vector coordinate system.
Why do SVG filters clip shadows around icon boundaries?
By default, an SVG <filter> subregion spans x='-10%' y='-10%' width='120%' height='120%' of the target element. Large blur radii (stdDeviation > 5) exceed this bounding box, causing sharp clipping edges. Expanding the filter region to x='-50%' y='-50%' width='200%' height='200%' resolves clipping.
What is the difference between color-interpolation-filters='sRGB' and 'linearRGB'?
linearRGB executes color math in a physically linear color space where light blends accurately without dark halos. sRGB applies a gamma transfer curve that can cause blurred colors to appear muddy or darker along high-contrast edges.
How does feColorMatrix create duotone icon effects?
A 4x5 transformation matrix multiplies the input Red, Green, Blue, and Alpha channels by constant weights. By mapping luminance (grayscale values) to target highlight and shadow color vectors, feColorMatrix renders crisp duotone icons with zero external image dependencies.