SVG Filters
Syntax
- Filter declaration:
<filter id="filter-id"> ...list of child primitives ...</filter> - Apply filter via SVG attribute:
<elementname filter="url(#filter-id)" ... /> - Apply filter via CSS property: (-prefix-)filter: url("#filter-id");
Parameters
| Element attributes | Details |
|---|---|
| Filter region | The filter element may optionally define the position, dimensions, resolution, and units for the output of a filter effect. The position and dimensions of a filter may be specified using the following parameters: x, y, width, height. The default values are not intuitive and are: x: -10% y: -10% width: 120% height: 120% |
| Filter resolution | The filterRes attribute is an optional attribute in SVG 1.1 that can be used to specify the resolution at which the filter is processed. This attribute had uneven support and is now deprecated in current browsers. |
| Filter units | By default, the units and coordinate system for the filter effects region (x,y,width,height) of a filter element are set relative to the bounding box of the element referencing the filter. In SVG terms, this is called the "objectBoundingBox". When we write x="50%" it means "set the starting x position of the filter region at the left side of the bounding box of the referencing element + 50% of the width of the element". But you may also specify the units and coordinates explicitly by setting the filterUnits property. The two alternatives are "objectBoundingBox" (the default which we're just described) or "userSpaceOnUse". userSpaceOnUse sets the filter units and the coordinate system to the canvas of the referencing element, or in SVG terms, the "userSpaceOnUse". |
| Primitive Units | In addition to the unit system for the filter itself, you may also specify the unit system that the filter's child filter primitives will use via the primitiveUnits attribute. Once again, the choice is between userSpaceOnUse and objectBoundingBox. These affect the 0,0 coordinates and the unit values for the filter primitives in the same way as for filterUnits. |
| Color Space | The default color space for SVG filters is linearRGB. The optional color-interpolation-filters attribute can be set to sRGB to change the color space to the more conventional sRGB space. |
Remarks
Most filter attributes are animateable via the <animate> element, although you must use the "fakeSMIL" library on IE to achieve the same results. SMIL animation (the <animate> element) will be deprecated in favor of the new Web Animations spec - which has very limited support as of mid 2016.
Child elements of the Filter element - filter primitives - have two optional attributes that specify the color space within which color interpolation calculations are performed: color-interpolation and color-interpolation-filters. The default for the former is sRGB, and the default for the latter is linearRGB. Manipulations that invert the color space (through feColorMatrix or feComponentTransfer) can result in non-intuitive results - for those used to the CSS sRGB color space. For example, a color inversion of a greyscale image in linearRGB will result in a pronounced shift toward whiter tones. This can be corrected by setting the value of the primitive to sRGB. These attributes can be set on the individual filter primitives or inherited from the filter element itself.
If no other input is specified, but one is required, the first filter primitive within a filter will take a rasterized (bitmapped) version of the referring element as its input. Subsequent filter primitives that expect an input will take the result of the immediately preceding filter primitive as input.
In complex filters, it can become difficult to keep track (and debug) inputs and outputs if they are left implicit; and it is good practice to explicitly declare inputs and outputs for each primitive.
SVG filter primitives can be colloquially divided into inputs, transformations, lighting effects and combinations.
Inputs:
feFlood: generates a color field
feTurbulence: generates a wide variety of noise effects
feImage: generates an image from an external image reference, data URI or object reference (object references are not supported in Firefox as of mid Dec '12)
Transformations:
feColorMatrix: transforms the input values of an RBGA pixel into output values
feComponentTransfer: adjusts the color curve of an individual color channel
feConvolveMatrix: replaces each pixel with a new pixel calculated from pixel values in an area relative to the current pixel)
feGaussianBlur: replaces the current pixel with a weighted average of pixels in an area around the pixel
feDisplacementMap: moves each pixel from its current position based on the R,G or B values from another input graphic.
feMorphology: replaces each pixel with a new pixel calculated from the maximum or minimum value of all pixels in a rectangular area around that pixel.
feOffset: moves the input from its current position
Lighting Effects:
feSpecularLighting: provides a "shiny" 2D or pseudo-3D lighting effect
feDiffuseLighting: provides a "matte" 2D or pseudo-3D lighting effect
feDistantLight: provides a distant light source for specular or diffuse lighting
feSpotLight: provides a conic section light source for specular or diffuse lighting
fePointLight: provides a point light source for specular or diffuse lighting
Combinations:
feMerge: creates a simple over composite from multiple inputs (including previous filter inputs)
feBlend: blends multiple inputs using mixing rules
feComposite: combines multiple inputs using set combination rules, taking into account alpha values.
feTile: tiles input to create a repeating pattern
Other Notes
Although SVG is a vector graphics technology, it is important to emphasize that SVG Filters perform pixel-level operations on all inputs (including SVG shapes) and produce rasterized (bitmapped) outputs at a specified level of resolution. Applying a 10x scale transform (for example) on an plain SVG curve that has been filtered at normal screen resolution will produce pixelated edges since the anti-aliasing of the original graphic has been converted to pixels by the filter and scaled up. (It is unclear whether this is spec compliant or just a limitation of current implementations)
Remember that SVG is XML when you write filters, so all tags must be closed and many properties and attributes are required to be specified explicitly or the filter will not execute.
A filter element is never rendered directly. It is only referenced using the filter property on the element to which the filter is applied. Note that the display property does not apply to the filter element and elements are not directly rendered even if the display property is set to a value other than "none". Conversely, filter elements are available for referencing even when thedisplay property on the filterelement or any of its ancestors is set to "none".
SVG filters can be referenced via a CSS Filter, although as of mid 2016, only a subset of primitives are supported via this mechanism, and this mechanism is not supported in Microsoft browsers.
