Show Menu
Cheatography

SVG Filters Cheat Sheet (DRAFT) by

a summary of SVG filters

This is a draft cheat sheet. It is a work in progress and is not finished yet.

The <f­ilt­er> element attributes

id =
"name"
filterUnits =
"userSpaceOnUse"
"objectBoundingBox"
primitiveUnits =
"userSpaceOnUse"
"objectBoundingBox"
x = | y =
"coordinate | -10%"
width = | height =
"length | 120%"
xlink:href =
"iri" inherit any attributes of
<filter> element iri that are
not defined in this element
color-interpolation-filters = "sRGB"

Common filter primitive attributes

result =
"filter-primitive-reference"
in =
"SourceGraphic"
default for first filter primitive
 
"SourceAlpha"
 
"BackgroundImage | BackgroundAlpha"
filtered object must be within
a container element specifying
enable-background="new"
 
"FillPaint | StrokePaint"
 
"filter-primitive-reference"
specfied by a previous result
 
default input for non-first filter
primitives is the output from
the previous filter primitive

Simpler filter primitives

<feGaussianBlur>
stdDeviation =
"blur spread | 0"
larger is blurrier
<feImage>
xlink:href =
"image source"
preserveAspectRatio =
"align [meet | slice]
none | xMidYMid meet"
<feMorphology>
operator =
"erode | dilate"
radius =
"x-radius y-radius"
"radius | 0"

Utility filters

<feTile>
tiles the in layer
<feOffset>
dx = | dy =
"x offset" | "y offset" | "0"
<feFlood>
flood-color =
"color specification"
flood-opacity =
"value" 0 - 1
 

Lighting effects

containers for light source elements
lighting-color =
"color specification"
surfaceScale =
"height | 1"
<feDiffuseLighting>
diffuseConstant =
"factor | 1"
must be nonnegative
<feSpecularLighting>
specularConstant =
"factor | 1"
must be nonnegative
specularExponent =
"exponent | 1" (1 - 128)
light source elements
<feDistantLight>
azimuth = | elevation =
"degrees | 0"
<fePointLight>
x = | y = | z =
"coordinate | 0"
<feSpotLight>
x = | y = | z =
"coordinate | 0"
pointsAtX =
pointsAtY =
pointsAtZ =
"coordinate | 0"
specularExponent =
"focus control | 1"
limitingConeAngle =
"degrees"

Combining filter primitives

<feMerge>
container for stacking
<feMergeNode> elements
<feMergeNode>
in =
"intermediate result"
<feBlend>
in2 =
"second input"
mode =
"normal | multiply
screen | darken | lighten"
<feComposite>
in2 =
"second input"
operator =
"over | in | out | atop
xor | arithmetic"
attributes used with "ar­ith­met­ic"
k1 =
"factor for in1 × in2 | 0"
k2 =
"factor for in1 | 0"
k3 =
"factor for in2 | 0"
k4 =
"additive offset | 0"
<feDisplacementMap>
scale =
"displacement factor | 0"
xChannelSelector =
"R | G | B | A"
yChannelSelector =
"R | G | B | A"
in2 =
"second input"
 

More filter primitives

<feColorMatrix>
type =
"matrix
| saturate | hueRotate
| luminanceToAlpha"
values =
"matrix values"
"saturation value" 0 - 1
"rotate degrees"
<feComponentTransfer>
container for <feFuncR>, <feFuncG>,
<feFuncB>, and <feFuncA> elements.
<feFuncX>
type =
"identity | table
| discrete | linear | gamma"
tableValues =
"intervals for table;
steps for discrete
"
slope =
"linear slope"
intercept =
"linear intercept"
amplitude =
"gamma amplitude"
exponent =
"gamma exponent"
offset =
"gamma offset"
<feConvolveMatrix>
order =
"columns rows"
"3 by 3"
kernel =
"values"
bias =
"offset value"
<feTurbulence>
type =
"turbulence" | "fractalNoise"
baseFrequency =
"x-frequency y-frequency"
baseFrequency =
"frequency"
numOctaves =
"integer"
seed =
"number"