SVG Filters Introduction
SVG Filters
SVG filters are used to add special effects to SVG graphics.
All SVG filters are defined within a <defs>
element. The <defs> element is short for
"definitions", and contains definition of special elements (such as filters).
The <filter> element is used
to define an SVG filter. The <filter>
element has a required id attribute which
identifies the filter. The graphic/image then points to the filter to use.
Then, inside the <filter> element, we
put one or more filter effects to use on the graphic (see table below for list of
filter effects elements).
Quick Example
Here we use the <feGaussianBlur> filter to
blur an SVG graphic:
Here is the SVG code:
Example
<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter
id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic"
stdDeviation="15" />
</filter>
</defs>
<rect width="90" height="90" fill="red" filter="url(#f1)" />
</svg>
Try it Yourself »
SVG Filter Effects Elements
The available filters in SVG are:
| Name | Description |
|---|---|
| <feBlend> | Combines two graphics together by a certain blending mode |
| <feColorMatrix> | Changes colors based on a transformation matrix |
| <feComponentTransfer> | Performs component-wise remapping of data for each pixel. Can adjust brightness, contrast, color balance, etc |
| <feComposite> | Performs combination of two input images pixel-wise in image space using a compositing operation |
| <feConvolveMatrix> | Applies a matrix convolution filter effect (this includes blurring, edge detection, sharpening, embossing and beveling) |
| <feDiffuseLighting> | Lights a graphic by using the alpha channel as a bump map |
| <feDisplacementMap> | Uses pixels values from the graphic from in2 attribute to displace the image from the in attribute |
| <feDistantLight> | Specifies a distant light source to be used inside a lighting filter primitive: <feDiffuseLighting> or <feSpecularLighting> |
| <feDropShadow> | Creates a drop shadow of the graphic |
| <feFlood> | Fills the filter subregion with the color and opacity defined by flood-color and flood-opacity attributes |
| <feGaussianBlur> | Blurs the graphic |
| <feImage> | Gets graphic data from an external source and provides the pixel data as output |
| <feMerge> | Blends input graphic layers (applies filter effects concurrently instead of sequentially) |
| <feMergeNode> | Takes the result of another filter to be processed by its parent <feMerge> |
| <feMorphology> | Erodes or dilates the graphic (for fattening or thinning effects) |
| <feOffset> | Offsets the input graphic |
| <fePointLight> | Specifies a light source that allows creating a point light effect |
| <feSpecularLighting> | Lights a source graphic by using the alpha channel as a bump map |
| <feSpotLight> | Specifies a light source that allows creating a spotlight effect |
| <feTile> | Fills a target rectangle with a repeated pattern of an input graphic |
| <feTurbulence> | Creates a graphic with the Perlin turbulence function |
Tip: You can use multiple filter effects on each SVG element!
In the next chapters, we will only demonstrate a touch of the filter effects that are possible - and give you an idea of what can be done with SVG!
