apike.ca

Filter Effects in SVG

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.

1
2
3
4
5
6
7
8
9
10
11
<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
Good
Blends two sources together.
Good
Color manipulation using a matrix.
feComponentTransfer
n/a
Good
Composes two inputs together using Porter/Duff.
feConvolveMatrix
n/a
feDiffuseLighting
Poor
Creates a diffuse lighting effect.
feDisplacementMap
n/a
Good
Fills the target with a color.
Good
Blurs the image.
Good
Loads an external image or use a fragment.
Good
Merge named filter results or a predefined one.
Good
Thins (erode) or expands (dilate) the source.
Good
Offset the result of another filter effect.
feSpecularLighting
Poor
Creates a specular lighting effect.
Good
Fills the target with a repeated pattern.
Good
Creates semi-transparent smoky or wave-like image.