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 |
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 |
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).