SVG Filters

Last Updated:

What to filter?

The <filter> SVG element defines a custom filter effect by grouping atomic filter primitives. It is never rendered itself, but must be used by the filter CSS property for HTML/SVG elements, or the filter attribute on SVG elements.

In this example, we will use the <feGaussianBlur> SVG element to blur the input image by the amount specified in stdDeviation, which defines the bell-curve.

Example

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <body> <svg height="110" width="110"> <defs> <filter id="point" x="0" y="0"> <feGaussianBlur in="SourceGraphic" stdDeviation="8" /> </filter> </defs> <rect width="90" height="90" stroke="red" stroke-width="3" fill="#339933" filter="url(#point)" /> </svg> </body> </html>

Attributes Value

AttributeExplanation
x Specifies a x-axis coordinate of the filter bounding box. Default is 0.
y Specifies a y-axis coordinate of the filter bounding box. Default is 0.
width Specifies a width of the filter bounding box. Default is 0.
height Specifies a height of the filter bounding box. Default is 0.
filterRes Specifies the numbers representing filter regions.
filterUnits Specifies the coordinate system for attributes x, y, width and height.
primitiveUnits Specifies the coordinate system for the various length values within the filter primitives and for the attributes that define the filter primitive subregion.
xlink:href Used to refer to another filter.

How to Blend and Offset?

  1. feBlend - The <feBlend> SVG filter primitive composes two objects together ruled by a certain blending mode.
  2. feOffset - The <feOffset> SVG filter primitive allows to offset the input image. The input image as a whole is offset by the values specified in the dx and dy attributes.

In this example, we will blend and offset the rectangle.

Example

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <body> <svg height="120" width="120"> <defs> <filter id="point1" x="0" y="0" width="200%" height="200%"> <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" /> <feBlend in="SourceGraphic" in2="offOut" mode="normal" /> </filter> </defs> <rect width="90" height="90" stroke="red" stroke-width="3" fill="#339933" filter="url(#point1)" /> </svg> </body> </html>

How to Create a Shadow?

In this example, we will create a shadow image for the rectangle by using <feOffset>, <feGaussianBlur>, and <feBlend> SVG attributes.

Example

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <body> <svg height="125" width="125"> <defs> <filter id="point2" x="0" y="0" width="200%" height="200%"> <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" /> <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" /> <feBlend in="SourceGraphic" in2="blurOut" mode="normal" /> </filter> </defs> <rect width="90" height="90" stroke="red" stroke-width="3" fill="#339933" filter="url(#point2)" /> </svg> </body> </html>

Filters

ValueExplanation
<feBlend> The <feBlend> SVG filter primitive composes two objects together ruled by a certain blending mode.
<feColorMatrix> The <feColorMatrix> SVG filter element changes colors based on a transformation matrix.
<feComponentTransfer> Th <feComponentTransfer> SVG filter primitive performs color-component-wise remapping of data for each pixel.
<feComposite> The <feComposite> SVG filter primitive performs the combination of two input images pixel-wise in image space using one of the Porter-Duff compositing operations: over, in, atop, out, xor, and lighter.
<feConvolveMatrix> The <feConvolveMatrix> SVG filter primitive applies a matrix convolution filter effect.
<feDiffuseLighting> The <feDiffuseLighting> SVG filter primitive lights an image using the alpha channel as a bump map.
<feDisplacementMap> The <feDisplacementMap> SVG filter primitive uses the pixel values from the image from in2 to spatially displace the image from in.
<feDropShadow> The <feDropShadow> filter primitive creates a drop shadow of the input image.
<feFlood> The <feFlood> SVG filter primitive fills the filter subregion with the color and opacity defined by flood-color and flood-opacity.
<feGaussianBlur> The <feGaussianBlur> SVG filter primitive blurs the input image by the amount specified in stdDeviation.
<feImage> The <feImage> SVG filter primitive fetches image data from an external source and provides the pixel data as output.
<feMerge> The <feMerge> SVG element allows filter effects to be applied concurrently instead of sequentially.
<feMorphology> The <feMorphology> SVG filter primitive is used to erode or dilate the input image.
<feOffset> The <feOffset> SVG filter primitive allows to offset the input image.
<feSpecularLighting> The <feSpecularLighting> SVG filter primitive lights a source graphic using the alpha channel as a bump map.
<feTile> The <feTile> SVG filter primitive allows to fill a target rectangle with a repeated, tiled pattern of an input image.
<feTurbulence> The <feTurbulence> SVG filter primitive creates an image using the Perlin turbulence function.

Share this Page

Meet the Author