SVG Filters

SVG filters are a powerful graphic effects technology that can be used to achieve various visual effects, such as blur, shadow, lighting, etc.

Filters can be applied to SVG graphic elements, such as rectangles, circles, paths, etc., as well as SVG text elements, giving them different appearances and effects.

Basic Syntax

SVG filters usually use the<filter>element to define, and are applied through thefilterattribute to the target elements.

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 定义滤镜 -->
  <filter id="filter_id">
    <!-- 滤镜效果 -->
  </filter>
  
  <!-- 应用滤镜的目标元素 -->
  <rect x="50" y="50" width="100" height="80" filter="url(#filter_id)" />
</svg>

Filter Effects

SVG filters can achieve a variety of effects. Common filter effects include:

• Blur: creates a blur effect on the image, using the<feGaussianBlur>element.

• Shadow: adds a shadow effect to the image, using the<feDropShadow>element.

• Brightness and Contrast Adjustment: adjusts the brightness and contrast of the image, using the<feComponentTransfer>element.

• Color Matrix: modifies the color of the image through color matrix operations, using the<feColorMatrix>element.

• Blend Mode: blends two images together, using the<feBlend>element.

The following code defines a blur filter and then applies it to a rectangle filled with red, giving the rectangle a blurred effect.

The available SVG filters are:

• feBlend - Filter that combines with images
• feColorMatrix - Used for color filter conversion
• feComponentTransfer
• feComposite
• feConvolveMatrix
• feDiffuseLighting
• feDisplacementMap
• feFlood
• feGaussianBlur
• feImage
• feMerge
• feMorphology
• feOffset - Filter shadow
• feSpecularLighting
• feTile
• feTurbulence
• feDistantLight - For lighting filters
• fePointLight - For lighting filters
• feSpotLight - For lighting filters

In addition, you can use multiple filters on every SVG element!

Notes

• SVG filters can be used in combination. Within a single<filter>element, multiple filter effects can be defined.

• Each filter effect has different parameters that can be adjusted, such as the standard deviation parameter of the blur filter, the offset and blur radius of the shadow filter, etc.

• SVG filters can be used with CSS style sheets, or directly on SVG elements usingstyleattributes for definition.

By using SVG filters, you can add various visual effects to SVG graphic elements, making them appear more vivid and diverse.