85

SVG Blur Effects

SVG uses the<feGaussianBlur>element to show the blur effect. SVG filters does not supported by Internet Explorer 9 and earlier versions

Example

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.