SVG Blur Effect

SVG uses the <feGaussianBlur> element to display a blurred effect. The <feGaussianBlur> filter applies a Gaussian blur to the input image, Internet Explorer 9and earlier versions do not support SVG filters.

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

The generated image effect after running is as follows:

Usage Explanation

• The id attribute of the <filter> defines the unique name of the pattern.

• The <feGaussianBlur> element is used to define the blur effect.

• The part in =“ SourceGraphic”of the <feGaussianBlur> element is used to define the effect for the entire element.

• The stdDeviation attribute is used to define the amount of blur.

• The filter attribute of the <rect> element is used to link the element to the “ p1”Filter.”