Currently, CSS provides a way to apply color effects to images (e.g., lightness, saturation, contrast, etc.) using the filter property. However, CSS filters are limited. The effects created with them are usually applicable to images but limited to color manipulation and blurring. To create powerful effects, we’ll need other functions. Such functions are available in SVG.
SVG filters add various effects to SVG graphics.
Filter Primitives
In SVG, each <filter> element includes a set of filter elements as its children. Each of such filter primitives performs one basic graphical operation on one or more inputs but outputs only one result. The input is specified in an attribute called in. The result of the operation is specified in the result attribute. The result can then be used as input to other operations. However, if the input is not specified in the in attribute, the result of the previous operation will automatically be used as input. All primitives have the same prefix: fe (a short for “filter effect”). They are named depending on what an element is or does. E.g., the primitive applying a Gaussian Blur effect to the source graphic is called feGaussianBlur.
Besides using the result of other primitives as input, a filter primitive can also accept other inputs such as SourceGraphic (an element to which the whole filter is applied) and SourceAlpha (the same as SourceGraphic, but this graphic contains only the element’s alpha channel).
Now there are 17 filter primitives that are defined in the SVG Filter specification.
Filter Elements in SVG
| Attribute | Description |
|---|---|
| <feBlend> | Blends two objects together using generally used imaging software blending modes. |
| <feColorMatrix> | Applies a matrix transformation. |
| <feComponentTransfer> | Performs component-wise remapping of data. |
| <feComposite> | Performs combination of two input images pixel-wise in image space. |
| <feConvolveMatrix> | Applies a matrix convolution filter effect. |
| <feDiffuseLighting> | Lights an image with the use of the alpha channel as a bump map. |
| <feDisplacementMap> | Uses pixels values from the image from in2 to displace the image from the in attribute. |
| <feFlood> | Creates a rectangle which is filled with the opacity and color values from the flood-opacity and flood-color properties. |
| <feGaussianBlur> | Applies a Gaussian blur on the input image. |
| <feImage> | Refers to a graphic external to this element, that is loaded or rendered into an RGBA raster becoming the result of the primitive. |
| <feMerge> | Blends input image layers. |
| <feMorphology> | Performs "thinning" or "fattening". |
| <feOffset> | Offsets the input image. |
| <feSpecularLighting> | Lights a source graphic with the use of the alpha channel as a bump map. |
| <feTile> | Fills a target rectangle with a repeated pattern of an input image. |
| <feTurbulence> | Creates an image with the Perlin turbulence function. |
| <feDistantLight> | Specifies a distant light source which can be used inside a lighting filter primitive. |
| <fePointLight>> | Specifies a light source that allows creating a point light effect. |
| <feSpotLight> | Specifies a light source that allows creating a spotlight effect. |
Practice Your Knowledge
Quiz Time: Test Your Skills!
Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.