Menu
Home Explore People Places Arts History Plants & Animals Science Life & Culture Technology
On this page
SVG filter effects
File modifier

SVG filter effects are effects applied to Scalable Vector Graphics (SVG) files. SVG is an open-standard XML format for two-dimensional vector graphics as defined by the World Wide Web Consortium (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 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 Gaussian 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 single RGBA 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 effect, there are now two layers of graphics, both with the same original source graphics.

Related Image Collections Add Image
We don't have any YouTube videos related to SVG filter effects yet.
We don't have any PDF documents related to SVG filter effects yet.
We don't have any Books related to SVG filter effects yet.
We don't have any archived web articles related to SVG filter effects yet.

SVG filter primitives

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:

NameElementSVG Basic
BlendfeBlendYes
Color matrixfeColorMatrixYes
Component transferfeComponentTransferYes
CompositefeCompositeYes
Convolve matrixfeConvolveMatrixNo
Diffuse lightingfeDiffuseLightingNo
Displacement mapfeDisplacementMapNo
FloodfeFloodYes
Gaussian blurfeGaussianBlurYes
ImagefeImageYes
MergefeMergeYes
MorphologyfeMorphologyNo
OffsetfeOffsetYes
Specular lightingfeSpecularLightingNo
TilefeTileYes
TurbulencefeTurbulenceNo

The current draft of the Filter Effects Module Level 1 adds a filter primitive for drop shadow. This primitive, feDropShadow, is just a shorthand for a combination of other filter primitives.1

Framework for applying a filter

<?xml version="1.0"?> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 400 300"> <defs> <filter id="AFilter"> <!-- Definition of filter goes here --> </filter> </defs> <text x="10" y="100" filter="url(#AFilter)">a filter applied</text> </svg>

References

  1. Schulze, Dirk; Jackson, Dean, eds. (18 December 2018). "Filter Effects Module Level 1". www.w3.org. Retrieved 2023-01-14. https://www.w3.org/TR/2018/WD-filter-effects-1-20181218/Overview.html#elementdef-fedropshadow