Become an Image Processing Pro With SVG-2: Understanding the <feGaussianBlur> and <feDropShadow>

Introduction

At this stage, it’s a good idea to explore the feGaussianBlur and feDropShadow filter elements, as they apply standalone visual effects without requiring blending or interaction with other elements.

Exploring The feGaussianBlur Element

As its name implies, feGaussianBlur creates a Gaussian blur effect.

It supports the following two key attributes:

• in: in is a common attribute for many filter elements, specifying the input element or the result of a previous filter effect. This attribute is not mandatory and can be ignored for now; it will be explained in detail later.
• stdDeviation: stdDeviation stands for “standard deviation” and determines the intensity of the Gaussian blur. Higher values create a stronger blur effect.

For example, consider the following SVG demonstration code:

<svg viewBox="0 0 480 200" xmlns="http://www.w3.org/2000/svg">
  <filter id="gaussianBlur1">
    <feGaussianBlur stdDeviation="1" />
  </filter>
  <filter id="gaussianBlur2">
    <feGaussianBlur stdDeviation="5" />
  </filter>
  <filter id="gaussianBlur3" x="-30%" y="-30%" width="160%" height="160%">
    <feGaussianBlur stdDeviation="10" />
  </filter>

  <circle cx="100" cy="100" r="50" style="filter: url(#gaussianBlur1);" />
  <circle
    cx="100"
    cy="100"
    r="50"
    style="filter: url(#gaussianBlur2); transform: translateX(140px);" />
  <circle
    cx="100"
    cy="100"
    r="50"
    style="filter: url(#gaussianBlur3); transform: translateX(280px);" />
</svg>

The real-time Gaussian blur effect is shown below:

• edgeMode: The edgeMode attribute controls how edge blurring is computed when the blur extends beyond the element’s boundaries. It supports the following three values:

duplicate | wrap | mirror | none (default)

As for the meaning of each value, there’s no need to worry. I tested them in a demo and found the visual differences between the values to be indistinguishable (possibly due to specific usage scenarios). Since this attribute is rarely needed in practice, it can be ignored.

Thus, after some testing, the only attribute worth focusing on is stdDeviation, as it directly controls the intensity of the blur effect.

About the feDropShadow Element

The feDropShadow element creates shadow effects, similar in syntax to the CSS filter: drop-shadow() function. It includes parameters for offset size, color, and blur radius.

These parameters correspond to the following HTML attribute values:

• dx: Horizontal offset size
• dy: Vertical offset size
• stdDeviation: Blur radius: Larger values produce softer, more diffused shadows.
• flood-color: Specifies the shadow’s fill color.
• flood-opacity: Controls shadow transparency. Since flood-color supports rgba() and #rrggbbaa formats, the flood-opacity attribute is mainly used when flood-color is defined with a color keyword.

For example, consider the following SVG code:

<svg
  width="320"
  height="192"
  xmlns="http://www.w3.org/2000/svg">
  <filter id="zxxShadow">
    <feDropShadow dx="5" dy="5" stdDeviation="5" flood-color="#f00a" />
  </filter>
  <text x="10" y="65" class="heavy" filter="url(#zxxShadow)">CSS Master</text>
  <style>.heavy {
    font-size: 50px;
    font-weight: bold;
    font-family: system-ui;
  }</style>
</svg>

This creates the text rendering effect shown below, where the black “CSS Master” text features a red drop shadow positioned relative to the text.

More Complex Usage Example

This demonstrates the partial image blur effect with a projection.

The related SVG code is as follows:

<svg
  width="256"
  height="192"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <filter id="myBlur">
    <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
  </filter>
  <filter id="myShadow">
    <feDropShadow in="SourceGraphic" dx="5" dy="5" stdDeviation="5" flood-color="#0005" />
  </filter>
  <clipPath id="myClip">
    <rect x="40" y="35" width="160" height="80" />
  </clipPath>
  <image href="https://raw.githubusercontent.com/trevortylerlee/n1/main/n1.jpeg" width="90%" filter="url(#myShadow)" />
  <image 
    href="https://raw.githubusercontent.com/trevortylerlee/n1/main/n1.jpeg" width="90%" 
    clip-path="url(#myClip)" 
    filter="url(#myBlur)" 
  />
</svg>

This creates the blurred effect in the center of the image, as seen in the screenshot below.

The underlying principle is also quite simple: crop the image, apply Gaussian blur, and overlay it onto a background without the Gaussian blur effect.

Finally

That’s all for today’s lesson. I’ve learned a lot, such as how the clipPath element can approximately achieve a masking effect.

Next, I’ll start studying more advanced SVG filters. See you then!