SVG Filters Introduction

SVG Filters can add various visual effects to graphics, such as blur, shadow, color transformation, etc.

Basic Structure

Filters are defined in the <defs> element and applied using the filter attribute:

<svg width="200" height="100">
  <defs>
    <filter id="myFilter">
      <!-- Filter effect definition -->
    </filter>
  </defs>

  <rect filter="url(#myFilter)" ... />
</svg>

Filter	Description
`feGaussianBlur`	Gaussian blur
`feOffset`	Offset
`feBlend`	Blend
`feColorMatrix`	Color matrix transformation
`feComponentTransfer`	Component transfer
`feComposite`	Composite
`feConvolveMatrix`	Convolution matrix
`feDiffuseLighting`	Diffuse lighting
`feDisplacementMap`	Displacement map
`feFlood`	Flood
`feMerge`	Merge
`feMorphology`	Morphology operations
`feSpecularLighting`	Specular lighting
`feTurbulence`	Turbulence noise
`feDropShadow`	Shadow (simplified version)

Simple Blur Effect

<svg width="300" height="120">
  <defs>
    <filter id="blur1">
      <feGaussianBlur stdDeviation="2"/>
    </filter>
    <filter id="blur2">
      <feGaussianBlur stdDeviation="5"/>
    </filter>
  </defs>

  <!-- No filter -->
  <rect x="20" y="20" width="60" height="60" fill="#3b82f6"/>
  <text x="50" y="100" text-anchor="middle" font-size="12">Original</text>

  <!-- Slight blur -->
  <rect x="120" y="20" width="60" height="60" fill="#3b82f6" filter="url(#blur1)"/>
  <text x="150" y="100" text-anchor="middle" font-size="12">Slight Blur</text>

  <!-- Strong blur -->
  <rect x="220" y="20" width="60" height="60" fill="#3b82f6" filter="url(#blur2)"/>
  <text x="250" y="100" text-anchor="middle" font-size="12">Strong Blur</text>
</svg>

Shadow Effect

<svg width="300" height="120">
  <defs>
    <filter id="shadow1" x="-20%" y="-20%" width="140%" height="140%">
      <feDropShadow dx="3" dy="3" stdDeviation="3" flood-color="#00000040"/>
    </filter>
  </defs>

  <rect x="30" y="20" width="80" height="60" rx="8" fill="#3b82f6" filter="url(#shadow1)"/>
  <circle cx="200" cy="50" r="35" fill="#22c55e" filter="url(#shadow1)"/>
</svg>

Color Filters

Grayscale Effect

<svg width="300" height="120">
  <defs>
    <filter id="grayscale">
      <feColorMatrix type="saturate" values="0"/>
    </filter>
  </defs>

  <!-- Original -->
  <circle cx="60" cy="60" r="40" fill="#3b82f6"/>
  <text x="60" y="115" text-anchor="middle" font-size="12">Original</text>

  <!-- Grayscale -->
  <circle cx="180" cy="60" r="40" fill="#3b82f6" filter="url(#grayscale)"/>
  <text x="180" y="115" text-anchor="middle" font-size="12">Grayscale</text>
</svg>

Hue Rotation

<svg width="400" height="120">
  <defs>
    <filter id="hue90">
      <feColorMatrix type="hueRotate" values="90"/>
    </filter>
    <filter id="hue180">
      <feColorMatrix type="hueRotate" values="180"/>
    </filter>
    <filter id="hue270">
      <feColorMatrix type="hueRotate" values="270"/>
    </filter>
  </defs>

  <circle cx="50" cy="50" r="35" fill="#3b82f6"/>
  <text x="50" y="100" text-anchor="middle" font-size="11">0°</text>

  <circle cx="130" cy="50" r="35" fill="#3b82f6" filter="url(#hue90)"/>
  <text x="130" y="100" text-anchor="middle" font-size="11">90°</text>

  <circle cx="210" cy="50" r="35" fill="#3b82f6" filter="url(#hue180)"/>
  <text x="210" y="100" text-anchor="middle" font-size="11">180°</text>

  <circle cx="290" cy="50" r="35" fill="#3b82f6" filter="url(#hue270)"/>
  <text x="290" y="100" text-anchor="middle" font-size="11">270°</text>
</svg>

Combined Filters

You can combine multiple filter effects:

<svg width="300" height="150">
  <defs>
    <filter id="combined" x="-20%" y="-20%" width="140%" height="140%">
      <!-- Shadow -->
      <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
      <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
      <!-- Merge original and shadow -->
      <feMerge>
        <feMergeNode in="offsetBlur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>

  <rect x="30" y="30" width="100" height="70" rx="10" fill="#3b82f6" filter="url(#combined)"/>
  <text x="180" y="70" font-size="28" font-weight="bold" fill="#ef4444" filter="url(#combined)">SVG</text>
</svg>

filter Attribute Details

filterUnits

Defines filter coordinate system:

<filter id="f1" filterUnits="userSpaceOnUse">
  <!-- Use user coordinate system -->
</filter>

<filter id="f2" filterUnits="objectBoundingBox">
  <!-- Use object bounding box (default) -->
</filter>

x, y, width, height

Defines filter region:

<filter id="myFilter" x="-50%" y="-50%" width="200%" height="200%">
  <!-- Filter effects may extend beyond object bounds, need to expand region -->
</filter>

Filter Input/Output

Use in and result attributes to connect filter effects:

<filter id="chainedFilter">
  <!-- Step 1: Blur -->
  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blur"/>

  <!-- Step 2: Offset blur result -->
  <feOffset in="blur" dx="5" dy="5" result="offsetBlur"/>

  <!-- Step 3: Blend with original -->
  <feBlend in="SourceGraphic" in2="offsetBlur" mode="normal"/>
</filter>

Predefined Inputs

Value	Description
`SourceGraphic`	Original graphic
`SourceAlpha`	Alpha channel of original graphic
`BackgroundImage`	Background image
`BackgroundAlpha`	Alpha channel of background
`FillPaint`	Fill color
`StrokePaint`	Stroke color

Practical Application Examples

Glow Effect

<svg width="200" height="100">
  <defs>
    <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="4" result="blur"/>
      <feMerge>
        <feMergeNode in="blur"/>
        <feMergeNode in="blur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>

  <text x="100" y="60" text-anchor="middle" font-size="32" font-weight="bold"
        fill="#fbbf24" filter="url(#glow)">GLOW</text>
</svg>

Inner Shadow Effect

<svg width="200" height="100">
  <defs>
    <filter id="innerShadow">
      <feOffset dx="2" dy="2"/>
      <feGaussianBlur stdDeviation="2" result="offset-blur"/>
      <feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse"/>
      <feFlood flood-color="black" flood-opacity="0.4" result="color"/>
      <feComposite operator="in" in="color" in2="inverse" result="shadow"/>
      <feComposite operator="over" in="shadow" in2="SourceGraphic"/>
    </filter>
  </defs>

  <rect x="30" y="20" width="140" height="60" rx="10" fill="#e5e7eb" filter="url(#innerShadow)"/>
</svg>

Noise Texture

<svg width="200" height="100">
  <defs>
    <filter id="noise">
      <feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="4" result="noise"/>
      <feBlend in="SourceGraphic" in2="noise" mode="multiply"/>
    </filter>
  </defs>

  <rect x="10" y="10" width="180" height="80" fill="#3b82f6" filter="url(#noise)"/>
</svg>

Performance Notes

::: warning Performance Tips

Complex filters can affect rendering performance
Avoid using filters on many elements
Consider using CSS filters for simple effects
Use filters carefully in animations :::

Next Steps

Now that you understand filter basics, let's dive deeper into SVG Blur Effects!

#SVG Filters Introduction

#Basic Structure

#Filter Elements

#Simple Blur Effect

#Shadow Effect

#Color Filters

#Grayscale Effect

#Hue Rotation

#Combined Filters

#filter Attribute Details

#filterUnits

#x, y, width, height

#Filter Input/Output

#Predefined Inputs

#Practical Application Examples

#Glow Effect

#Inner Shadow Effect

#Noise Texture

#Performance Notes

#Next Steps