feGaussianBlur

The filter blurs the input image by the amount specified in stdDeviation, which defines the bell-curve.

Usage context

Categories Filter primitive element
Permitted content Any number of the following elements, in any order:
<animate>, <set>
Normative document SVG 1.1 (2nd Edition)

Example

Simple example

<svg width="230" height="120"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">

  <filter id="blurMe">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
  </filter>

  <circle cx="60"  cy="60" r="50" fill="green" />

  <circle cx="170" cy="60" r="50" fill="green"
          filter="url(#blurMe)" />
</svg>

The result for this example is the following:

ScreenshotLive sample

Drop shadow example

<svg width="120" height="120"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">

  <filter id="dropShadow">
    <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
    <feOffset dx="2" dy="4" />
    <feMerge>
        <feMergeNode />
        <feMergeNode in="SourceGraphic" />
    </feMerge>
  </filter>

  <circle cx="60"  cy="60" r="50" fill="green"
          filter="url(#dropShadow)" />
</svg>

The result for this example is the following:

ScreenshotLive sample

Attributes

Global attributes

Specific attributes

DOM Interface

This element implements the SVGFEGaussianBlurElement interface.

See also

Attachments

File Size Date Attached by
Simple example (PNG)
Expected rendering for the simple example
3463 bytes 2012-11-07 10:43:44 Jeremie
Drop shadow example (PNG)
Expected rendering for the drop shadow example
3337 bytes 2012-11-07 11:10:08 Jeremie

Document Tags and Contributors

Contributors to this page: kscarfone, Manuel_Strehl, Jeremie
Last updated by: kscarfone,