SVG Filters and Effects

SVG (Scalable Vector Graphics) filters and effects allow you to apply various visual effects to SVG elements, such as blurring, color manipulation, and drop shadows. Filters are defined using filter elements and can be applied to SVG elements using the filter attribute. Here's how to use SVG filters and effects:

1. Blur

The feGaussianBlur filter applies a Gaussian blur to an element, creating a soft, out-of-focus effect.

Example:

<svg width="200" height="100">
  <defs>
    <filter id="blur">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
    </filter>
  </defs>
  <circle cx="50" cy="50" r="40" fill="blue" filter="url(#blur)" />
</svg>

This example applies a Gaussian blur with a standard deviation of 5 to a blue circle.

2. Drop Shadow

The feDropShadow filter adds a drop shadow effect to an element.

Example:

<svg width="200" height="100">
  <defs>
    <filter id="shadow" height="130%">
      <feDropShadow dx="2" dy="2" stdDeviation="2" flood-color="black" />
    </filter>
  </defs>
  <circle cx="50" cy="50" r="40" fill="blue" filter="url(#shadow)" />
</svg>

This example adds a drop shadow with an offset of (2,2) and a standard deviation of 2 to a blue circle.

3. Color Matrix

The feColorMatrix filter applies a matrix transformation to change the color of an element.

Example:

<svg width="200" height="100">
  <defs>
    <filter id="colorize">
      <feColorMatrix type="matrix" values="1 0 0 0 0
                                             0 1 0 0 0
                                             0 0 1 0 0
                                             0 0 0 1 0" />
    </filter>
  </defs>
  <circle cx="50" cy="50" r="40" fill="blue" filter="url(#colorize)" />
</svg>

This example applies a color matrix transformation to change the color of a blue circle to its original color.

4. Conclusion

SVG filters and effects provide a wide range of options for enhancing the visual appearance of SVG graphics. By using filters like feGaussianBlur, feDropShadow, and feColorMatrix, you can create stunning visual effects that add depth and richness to your SVG illustrations and designs.

Archive