SVG Blur Effect

Note: Internet Explorer and Safari do not support SVG filters!

<defs> and <filter>

All internet SVG filters are defined within the <defs> element. The <defs> element is short for definitions and contains special element definitions (such as filters).

The <filter> tag is used to define an SVG filter. The <filter> tag uses the required id attribute to define which filter to apply to the graphics.

SVG <feGaussianBlur>

Example 1

The <feGaussianBlur> element is used to create a blur effect:

Below is the SVG code:

Example

For Opera users: View SVG file (right-click on the SVG graphic to preview the source).

Code Analysis:

• The <filter> element's id attribute defines a unique name for the filter

• The <feGaussianBlur> element defines the blur effect

• The in="SourceGraphic" part defines the effect created from the entire image

• The stdDeviation attribute defines the amount of blur

• The filter attribute of the <rect> element is used to link the element to the "f1" filter