An element is filtered with filter="url(#id)". The filter
element holds a chain of primitives, run in order. Each primitive reads one or two
inputs and makes one result. The explorer’s Paths tab lists each filter’s primitives as
a chain, and the problem list names an in or in2 that refers to
a result no earlier primitive makes.
The filter element
| Attribute | Default | Meaning |
|---|---|---|
x, y, width, height | −10%, −10%, 120%, 120% | The filter region: nothing outside it is drawn. It is too small for blurs and shadows that spread past the element, a common reason a drop shadow looks cut off. |
filterUnits | objectBoundingBox | What the region’s numbers mean. |
primitiveUnits | userSpaceOnUse | What the numbers inside primitives (stdDeviation, dx, radius) mean. With objectBoundingBox they are fractions of the element’s box. |
href / xlink:href | Inherits attributes and primitives from another filter (SVG 1.1; browsers have mostly dropped it). | |
filterRes | SVG 1.1 only: the resolution to filter at. |
Inputs and results
Every primitive may have x, y, width,
height (its subregion, by default the union of its inputs’ subregions or
the filter region), result (a name) and
color-interpolation-filters (linearRGB by default, which
surprises authors who expect sRGB). in and in2 take one of:
| Value | Meaning |
|---|---|
SourceGraphic | The element being filtered. |
SourceAlpha | Its alpha channel, with black colour. |
a result name | The output of an earlier primitive in the same filter. A name no earlier primitive defines is an error, and readers treat it as the previous result. |
| nothing | The previous primitive’s result, or SourceGraphic for the first. |
BackgroundImage, BackgroundAlpha | SVG 1.1, with enable-background. Removed in SVG 2; browsers treat them as empty. |
FillPaint, StrokePaint | SVG 1.1. Removed from the Filter Effects Module; browsers treat them as empty. |
The primitives
| Element | Attributes | What it does |
|---|---|---|
feBlend | in, in2, mode | mode is normal (default), multiply, screen, darken, lighten in SVG 1.1; the Filter Effects Module adds overlay, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity. |
feColorMatrix | in, type, values | type: matrix (20 numbers, a 4 × 5 matrix on RGBA; the default), saturate (one number, 0 to 1 in SVG 1.1), hueRotate (an angle in degrees), luminanceToAlpha (no values). |
feComponentTransfer | in | Holds up to one each of feFuncR, feFuncG, feFuncB, feFuncA. |
feFuncR, feFuncG, feFuncB, feFuncA | type, tableValues, slope, intercept, amplitude, exponent, offset | type: identity, table and discrete (use tableValues), linear (slope default 1, intercept default 0), gamma (amplitude 1, exponent 1, offset 0). |
feComposite | in, in2, operator, k1 to k4 | operator: over (default), in, out, atop, xor, arithmetic (result = k1·i1·i2 + k2·i1 + k3·i2 + k4, per channel), and lighter from the Filter Effects Module. |
feConvolveMatrix | in, order, kernelMatrix, divisor, bias, targetX, targetY, edgeMode, kernelUnitLength, preserveAlpha | A convolution. order is the kernel size (default 3); kernelMatrix has order × order numbers; divisor defaults to their sum (or 1 if the sum is 0); edgeMode is duplicate (default), wrap or none. |
feDiffuseLighting | in, surfaceScale (1), diffuseConstant (1), kernelUnitLength; lighting-color | Lights the input’s alpha as a height map with Lambertian reflection. One light source child is needed. |
feSpecularLighting | in, surfaceScale (1), specularConstant (1), specularExponent (1; 1 to 128), kernelUnitLength; lighting-color | The same with specular reflection; the output is a light picture to add to the original. |
feDistantLight, fePointLight, feSpotLight | distant: azimuth, elevation. point: x, y, z. spot: x, y, z, pointsAtX, pointsAtY, pointsAtZ, specularExponent, limitingConeAngle | The light source child of a lighting primitive. Angles are in degrees. |
feDisplacementMap | in, in2, scale, xChannelSelector, yChannelSelector | Moves the pixels of in by the chosen channel (R, G, B or A; default A) of in2, times scale. |
feDropShadow | in, dx (2), dy (2), stdDeviation (2); flood-color, flood-opacity | From the Filter Effects Module (so, not in SVG 1.1): blur, offset and flood in one primitive. |
feFlood | flood-color (black), flood-opacity (1) | Fills its subregion with one colour. |
feGaussianBlur | in, stdDeviation, edgeMode (Filter Effects) | One number or two (x and y). A negative value is an error. SVG 1.1 says a zero value disables the primitive (a transparent black result); the Filter Effects Module makes zero in both directions pass the input through unchanged. |
feImage | href / xlink:href, preserveAspectRatio, crossorigin | An image file, or the rendering of an element given by #id. |
feMerge, feMergeNode | node: in | Stacks the nodes’ inputs in order, first at the bottom. |
feMorphology | in, operator, radius | erode (default) or dilate. A negative radius is an error; zero disables the result. |
feOffset | in, dx, dy | Shifts the input; both default to 0. |
feTile | in | Fills its subregion with copies of the input’s subregion. |
feTurbulence | baseFrequency (0), numOctaves (1), seed (0), stitchTiles (noStitch), type (turbulence or fractalNoise) | Perlin noise from the reference algorithm in the specification, so every reader makes the same noise. A negative base frequency is an error. |
Primitives may also contain animate and set children, which
change their attributes over time.
Not described
This page is partial.
- Reference: the algorithms (blur box approximation, convolution edge cases, lighting formulas, Perlin noise code, subregion rules) are not described; the page gives each primitive’s attributes and defaults, written without the Filter Effects text open. The CSS filter functions are not described.
- Viewer: lists each filter, its primitives as a chain, and checks
inandin2against earlier results and enumerated values. It does not apply any filter and does not check a primitive’s child elements.