SVG filter effects

SVG filter effects are effects applied to <a href="/facts/Scalable_Vector_Graphics/ARq5C3YV">Scalable Vector Graphics</a> (SVG) files. SVG is an <a href="/facts/Open_standard/RGvhGQVI">open-standard</a> <a href="/facts/XML/clNgUfWk">XML format</a> for two-dimensional <a href="/facts/Vector_graphics/y8ok7M2P">vector graphics</a> as defined by the <a href="/facts/World_Wide_Web_Consortium/lGWmhF6M">World Wide Web Consortium</a> (W3C). A filter effect consists of a series of graphics operations that are applied to a given source vector graphic to produce a modified <a href="/facts/Bitmapped/HkXNc8oI">bitmapped</a> result.
Filter effects are defined by filter elements. The filter property is set on a container element or on a graphics element to apply a filter effect to it. Each filter element contains a set of filter primitives as its children. Each filter primitive performs a single fundamental graphical operation (e.g., a <a href="/facts/Gaussian_blur/4LzxTJP0">Gaussian blur</a> 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 single <a href="/facts/RGBA_color_space/gSIu9laE">RGBA</a> 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 a <a href="/facts/Drop_shadow/d7jSbVFF">drop shadow</a>. In effect, there are now two layers of graphics, both with the same original source graphics.

SVG filter effects open-in-new

SVG filter effects