SVG Blur Effects

SVG Blur Effects:

and Elements Recap

As a reminder, all SVG filter effects are defined within a <defs> element. The <defs> (definitions) tag hosts reusable definitions.

The <filter> element itself defines a specific filter effect. It must have an id attribute, which is used by graphical elements to reference and apply the filter via the filter attribute (e.g., filter="url(#myFilter)").

The Filter Primitive

Example 1: Applying a Gaussian Blur

The <feGaussianBlur> filter primitive applies a blur effect to the input image. The amount of blur is controlled by the stdDeviation attribute.

Visual Output Description: This SVG would render a yellow rectangle with a green border. The entire rectangle, including its border, would appear significantly blurred, with soft, indistinct edges.

SVG Code:

<svg width="150" height="150" viewBox="0 0 110 110">
  <defs>
    <filter id="f1" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />
</svg>

Code Explanation:

• <filter id="f1" ...>: Defines the filter. The x, y, width, height attributes on the filter define the filter effects region. It’s often good to make this larger than the target element to accommodate the blur.
• <feGaussianBlur ... />: The blur primitive.
• in="SourceGraphic": Specifies that the input for the blur is the original graphical element to which the filter is applied.
• Other common inputs for in include SourceAlpha (uses only the alpha channel of the source), BackgroundImage, BackgroundAlpha, FillPaint, StrokePaint, or the result of a previous filter primitive (using its result attribute value).
• stdDeviation="5": Defines the standard deviation for the blur operation. A larger value creates more blur. This can be a single number (for equal blur in x and y) or two numbers (for different x and y blur).
• filter="url(#f1)": Applied to the <rect> element to link it to the ‘f1’ filter definition.

Practical Applications:

<feGaussianBlur> is commonly used for:

• Creating soft shadows (often in combination with <feOffset> and <feMerge>).
• Giving a sense of depth or focus/defocus.
• Softening edges of graphics.
• Creating glow effects (by blurring a copy of an object and overlaying it).

Learning Tip: Experiment with different stdDeviation values to see their impact. For performance, be mindful that large blur radii can be computationally intensive, especially on complex graphics or animations.

Further resources on SVG filters, including <feGaussianBlur>, can be found on MDN Web Docs.