SVG Filters

SVG uses <filter> element to define filters. It is used to add special effects to SVG graphics.

The <filter> element uses an id attribute to uniquely identify it. SVG filters are not supported by Internet Explorer 9 and earlier versions.

SVG <feGaussianBlur> Filter

SVG uses the <feGaussianBlur> element to show the blur effect.

Example

<!DOCTYPE html>
<html>
<body>

<h2>Blur effect</h2>

<svg height="250" width="250">
<filter id="p1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</filter>
<rect width="120" height="120" stroke="green" stroke-width="3" fill="purple" filter="url(#p1)" />

</svg>
</body>
</html>

Test it Now

Explanation

The id attribute of <filter> defines a unique name for the pattern.
<feGaussianBlur> element is used to define blur effect.
The in="SourceGraphic" part of <feGaussianBlur> element is used to define that the effect is created for the entire element.
The stdDeviation attribute is used to define the amount of the blur.
The filter attribute of the <rect> element is used to link the element to the "p1" filter.

Next TopicSVG feOffset Filter

← prev next →