| Filter Effects | |
|---|---|
| Filter Effects Module Level 1 | |
 Wood texture and drop shadow simulated withSVG filters | |
| Status | Working Draft (WD) |
| Year started | 15 October 2012 (2012-10-15) |
| First published | 15 October 2012 (2012-10-15) |
| Latest version | December 18, 2018 (2018-12-18) |
| Preview version | Editor's Draft October 30, 2019 (2019-10-30) |
| Organization | W3C |
| Committee | CSS Working Group |
| Editors |
|
| Domain | Visual effects |
| Scalable Vector Graphics |
|---|
SVG filter effects are effects applied toScalable Vector Graphics (SVG) files. SVG is anopen-standardXML format for two-dimensionalvector graphics as defined by theWorld Wide Web Consortium (W3C). Afilter effect consists of a series of graphics operations that are applied to a given source vector graphic to produce a modifiedbitmapped result.
Filter effects are defined by filter elements. Thefilter property is set on a container element or on a graphics element to apply a filter effect to it. Eachfilter element contains a set of filter primitives as its children. Each filter primitive performs a single fundamental graphical operation (e.g., aGaussian blur or a lighting effect) on one or more inputs, producing a graphical result. Because most of the filter primitives represent some form of image processing, in most cases the output from a filter primitive is a singleRGBA bitmap image (however, it will be regenerated if a higher resolution is called on).
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 for two by adding a black copy of the original source graphic but offset to create adrop shadow. In effect, there are now two layers of graphics, both with the same original source graphics.
| Textures: | feTurbulence,feDiffuseLighting,feDistantLight,feComposite andfeBlend |
| Shadows: | feGaussianBlur,feOffset,feColorMatrix andfeBlend |
The following table lists the filter primitives available in both SVG 1.0 and SVG 1.1. SVG Tiny does not support filter effects, whileSVG Basic supports only those filter primitives shown:
| Name | Element | SVG Basic |
|---|---|---|
| Blend | feBlend | Yes |
| Color matrix | feColorMatrix | Yes |
| Component transfer | feComponentTransfer | Yes |
| Composite | feComposite | Yes |
| Convolve matrix | feConvolveMatrix | No |
| Diffuse lighting | feDiffuseLighting | No |
| Displacement map | feDisplacementMap | No |
| Flood | feFlood | Yes |
| Gaussian blur | feGaussianBlur | Yes |
| Image | feImage | Yes |
| Merge | feMerge | Yes |
| Morphology | feMorphology | No |
| Offset | feOffset | Yes |
| Specular lighting | feSpecularLighting | No |
| Tile | feTile | Yes |
| Turbulence | feTurbulence | No |
The current draft of the Filter Effects Module Level 1 adds a filter primitive fordrop shadow. This primitive,feDropShadow, is just a shorthand for a combination of other filter primitives.[1]
<?xml version="1.0"?><svgxmlns="http://www.w3.org/2000/svg"version="1.1"viewBox="0 0 400 300"><defs><filterid="AFilter"><!-- Definition of filter goes here --></filter></defs><textx="10"y="100"filter="url(#AFilter)">afilterapplied</text></svg>