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" />