Styling Vectors with SVG Filters: Shadows, Blurs, and Glows

SVG filters allow you to apply complex graphical transformations—such as drop shadows, blurs, and ambient color glows—directly on vector shapes using XML primitives.

1. Introducing Filter Primitives

Filters are compiled inside <filter> elements and composed of step-by-step primitives:

• <feGaussianBlur>: Blurs shapes along stdDeviation radius boundaries.
• <feOffset>: Offsets the coordinates to simulate shadow directions.
• <feMerge>: Merges output effects with the original graphic vector.

2. Vector Code Example: Glow Filter definition

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- Soft Glow Filter -->
    <filter id="softGlow" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur stdDeviation="5" result="blur" />
      <feMerge>
        <feMergeNode in="blur" />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
  </defs>
  <circle cx="50" cy="50" r="30" fill="#f43f5e" filter="url(#softGlow)" />
</svg>