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 Elements

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

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!