Filter Effects

Filter effects are defined by filter element with the associated filter primitives children. To apply a filter effect, you set the value of the filter property on the given object such that it references the filter effect.

Each filter element contains a set of filter primitives as its children. Each filter primitive performs a single fundamental graphical operation (e.g., a blur or a lighting effect) on one or more inputs, producing a graphical result.

The original source graphic or the result from a filter primitive can be used as input into one or more other filter primitives. A common application is to use the source graphic multiple times. For example, a simple filter could replace one graphic by two by adding a black copy of original source graphic offset to create a drop shadow. In effect, there are now two layers of graphics, both with the same original source graphics.

Sometimes filter primitives result in undefined pixels. For example, filter primitive feOffset can shift an image down and to the right, leaving undefined pixels at the top and left. In these cases, the undefined pixels are set to transparent black.

The following table lists the filter primitives and their descriptions.

Filter Primitives Description
feBlend This filter composites two objects together using commonly used imaging software blending modes. It performs a pixel-wise combination of two input images.
feComponentTransfer This filter primitive performs component-wise remapping of data as follow:
R' = feFuncR( R )
G' = feFuncG( G )
B' = feFuncB( B )
A' = feFuncA( A )
for every pixel. It allows operations like brightness adjustment, contrast adjustment, color balance or thresholding.
feComposite This filter performs the combination of the two input images pixel-wise in image space using one of the Porter-Duff compositing operations: over, in, atop, out, xor. Additionally, a component-wise arithmetic operation (with the result clamped between [0..1]) can be applied.
feDiffuseLighting This filter primitive lights an image using the alpha channel as a bump map. The resulting image is an RGBA opaque image based on the light color with alpha = 1.0 everywhere. The lighting calculation follows the standard diffuse 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 light source is defined by one of the child elements
feDistantLight
fePointLight
feSpotLight

feDisplacementMap This filter primitive uses the pixels values from the image from in2 to spatially displace the image from in. This is the transformation to be performed:
P'(x,y) <- P( x + scale * (XC(x,y) - .5), y + scale * (YC(x,y) - .5))
where P(x,y) is the input image, in, and P'(x,y) is the destination. XC(x,y) and YC(x,y) are the component values of the designated by the xChannelSelector and yChannelSelector. For example, to use the R component of in2 to control displacement in x and the G component of Image2 to control displacement in y, set xChannelSelector to "R" and yChannelSelector to "G".
feFlood This filter primitive creates a rectangle filled with the color and opacity values from properties 'flood-color' and 'flood-opacity'. The rectangle is as large as the filter primitive subregion established by the x, y, width and height attributes on the feFlood element.
feGaussianBlur This filter primitive performs a Gaussian blur on the input image.
feMerge This filter primitive composites input image layers on top of each other using the over operator with Input1 (corresponding to the first feMergeNode child element) on the bottom and the last specified input, InputN (corresponding to the last feMergeNode child element), on top. Each feMerge element can have any number of feMergeNode subelements, each of which has an in attribute.
feMorphology This filter primitive performs "fattening" or "thinning" of artwork. It is particularly useful for fattening or thinning an alpha channel.
feOffset This filter primitive offsets the input image relative to its current position in the image space by the specified vector. This is important for effects like drop shadows.
feSpecularLighting

This filter primitive lights a source graphic 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 light source is defined by one of the child elements
feDistantLight
fePointLight
feSpotLight

feTile This filter primitive fills a target rectangle with a repeated, tiled pattern of an input image. The target rectangle is as large as the filter primitive subregion established by the x, y, width and height attributes on the feTile element.
feTurbulance This filter primitive creates an image using the Perlin turbulence function. It allows the synthesis of artificial textures like clouds or marble. The resulting image will fill the entire filter primitive subregion for this filter primitive.

The Filter Primitives below are not available / supported yet.

Note: Some or partial part of the information above is adapted from Scalable Vector Graphics (SVG) 1.0 Specification which is Copyright © 2003 W3C (MIT, ERCIM, Keio).