Filter Effects in SVG

By mbystedt on Mar 4, 2014, 12:53:05 AM

Filter effect elements define what a filter does to a graphic. The filter effect elements are all placed inside a filter element.

Filter Effect Common Attributes

All filter effect elements have a number of common attributes. The x, y, width and height attributes normally do not need to be defined and are relative to clipping plane established by containing filter.

Attribute	Explanation
x, y	Provides top-left coordinates to define where to render of the filter effect. (default: 0)
width, height	Provides dimensions of the box that defines where where the filter effect is rendered. (default: 100%)
result	Names the output of the filter effect so that it can be used as the input to another filter effect. This is not a unique id and can only be used within the containing filter.
in	This can specify a named result or a predefined option as the filter effect input. See below.

In & Result Attribute Use

The attribute in has a number of predefined options besides using a explicitly named result. These attributes are listed and shown in an example below.

in	Support	Description
SourceGraphic	Good	Default. Use attached source graphic as-is.
SourceAlpha	Good	Take source alpha channel of attached graphic and place on black.
BackgroundImage	Poor	Like SourceGraphic but works on background. Requires explicit setup.
BackgroundAlpha	Poor	Like SourceAlpha but works on background. Requires explicit setup.
FillPaint	Poor	Use the fill paint as if it were put on an infinite plane. Firefox Only.
StrokePaint	Poor	Use the stroke paint as if it were put on an infinite plane. Firefox Only.

Example 1. The predefined filter effect input sources. 'SourceGraphic' and 'SourceAlpha' are the only well supported options. (Download)

The attribute result allows you to reference that effect within the filter using the in attribute. Otherwise, you can rely on in implicitly being the result of the previous filter. The final result that is output does not need to be given any special name. It is implicitly the last effect in the filter. All named results must be located preceding where they are used in the file.

<defs>
  <filter id="tileExplicit" x="20" y="20" width="600" height="160" filterUnits="userSpaceOnUse">
    <feOffset in="SourceGraphic" result="offset" x="20" y="20" width="100" height="30" />
    <feTile in="offset" />
  </filter>
 
  <filter id="tileImplicit" x="20" y="20" width="600" height="160" filterUnits="userSpaceOnUse">
    <feOffset in="SourceGraphic" x="20" y="20" width="100" height="30" />
    <feTile /><!-- By default, in is the previous result. -->
  </filter>
</defs>

Code 1. The two example filters are the same. The first explicitly names the results and input and the second shows that is not necessary.

Filter Effect Reference

This table shows the filter effects available in SVG and a brief description of the current level of support.

tag	Support	Description
feBlend	Good	Blends two sources together.
feColorMatrix	Good	Color manipulation using a matrix.
feComponentTransfer	n/a
feComposite	Good	Composes two inputs together using Porter/Duff.
feConvolveMatrix	n/a
feDiffuseLighting	Poor	Creates a diffuse lighting effect.
feDisplacementMap	n/a
feFlood	Good	Fills the target with a color.
feGaussianBlur	Good	Blurs the image.
feImage	Good	Loads an external image or use a fragment.
feMerge	Good	Merge named filter results or a predefined one.
feMorphology	Good	Thins (erode) or expands (dilate) the source.
feOffset	Good	Offset the result of another filter effect.
feSpecularLighting	Poor	Creates a specular lighting effect.
feTile	Good	Fills the target with a repeated pattern.
feTurbulence	Good	Creates semi-transparent smoky or wave-like image.