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
"­ari­thm­eti­c"
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"