SVG filter effects are effects applied to

Scalable Vector Graphics Scalable Vector Graphics (SVG) is an XML-based vector image format for defining two-dimensional graphics, having support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium sinc ...

(SVG) files. SVG is an open-standard XML format for two-dimensional

vector graphics Vector graphics is a form of computer graphics in which visual images are created directly from geometric shapes defined on a Cartesian plane, such as points, lines, curves and polygons. The associated mechanisms may include vector display a ...

as defined by the

World Wide Web Consortium The World Wide Web Consortium (W3C) is the main international standards organization for the World Wide Web. Founded in 1994 and led by Tim Berners-Lee, the consortium is made up of member organizations that maintain full-time staff working to ...

(W3C). A filter effect consists of a series of graphics operations that are applied to a given source vector graphic to produce a modified

bitmapped upright=1, The Smiley, smiley face in the top left corner is a raster image. When enlarged, individual pixels appear as squares. Enlarging further, each pixel can be analyzed, with their colors constructed through combination of the values for ...

result. Filter effects are defined by filter elements. The property is set on a container element or on a graphics element to apply a filter effect to it. Each element contains a set of filter primitives as its children. Each filter primitive performs a single fundamental graphical operation (e.g., a

Gaussian blur In image processing, a Gaussian blur (also known as Gaussian smoothing) is the result of blurring an image by a Gaussian function (named after mathematician and scientist Carl Friedrich Gauss). It is a widely used effect in graphics software, ...

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

RGBA RGBA stands for red green blue alpha. While it is sometimes described as a color space, it is actually a three-channel RGB color model supplemented with a fourth ''alpha channel''. Alpha indicates how opaque each pixel is and allows an image to ...

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

drop shadow In graphic design and computer graphics, a drop shadow is a visual effect consisting of a drawing element which looks like the shadow of an object, giving the impression that the object is raised above the objects behind it. The drop shadow is of ...

. In effect, there are now two layers of graphics, both with the same original source graphics.

SVG filter primitives

demo_animated_feTurbulence_feDisplacementMap_mask_SMIL

The following table lists the filter primitives available in both SVG 1.0 and SVG 1.1. SVG Tiny does not support filter effects, while SVG Basic supports only those filter primitives shown: The current draft of the Filter Effects Module Level 1 adds a filter primitive for

. This primitive, feDropShadow, is just a shorthand for a combination of other filter primitives.Filter Effects Module Level 1, W3C Working Draft, 18 December 2018
/ref>

Framework for applying a filter

External links

W3C SVG page
specifications, list of implementations

W3C Primer (draft) chapter and examples concerning filters.
FILDROP
A set of custom SVG filter effects and generator filter effects
SVG Filter Builder
An interactive, visual SVG filter programming tool which can be used both for visualising existing filters (by uploading a SVG) but also to design your own from scratch and save them.

References

{{W3C standards Scalable Vector Graphics