SVG Filters Reference
SVG filters and visual effects for advanced graphics
Filter Basics
id="myFilter"> # define filter
# filter primitives here
filter="url(#myFilter)" /> # apply filter
Blur & Shadow
# Gaussian blur
in="SourceGraphic" stdDeviation="5" />
# Drop shadow
dx="2" dy="2" # offset
stdDeviation="3" # blur amount
flood-color="#000" /> # shadow color
Color Effects
# Color matrix (grayscale)
type="saturate" values="0" />
# Brightness/Contrast
type="linear" slope="1.5" />
# Hue rotation
type="hueRotate" values="90" />
Blend Modes
mode="multiply" # multiply blend
in="SourceGraphic" in2="BackgroundImage" />
# Available modes:
normal, multiply, screen, overlay,
darken, lighten, color-dodge,
color-burn, hard-light, soft-light
Advanced Effects
# Turbulence (noise)
type="fractalNoise"
baseFrequency="0.05" />
# Displacement map
scale="50"
xChannelSelector="R" />
# Morphology (erode/dilate)
operator="erode" radius="1" />