SVG Blur Effects
SVG <feGaussianBlur>
The <feGaussianBlur> filter is used to create blur effects:
Here is the SVG code:
Example
<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter
id="f1" x="0" y="0" xmlns="http://www.w3.org/2000/svg">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</filter>
</defs>
<rect width="90" height="90"
fill="yellow" filter="url(#f1)" />
</svg>
Try it Yourself »
Code explanation:
- The
idattribute of the<filter>element defines a unique name for the filter - The blur effect is defined with the
<feGaussianBlur>element - The
in="SourceGraphic"part defines that the effect is created for the entire element - The
stdDeviationattribute defines the amount of the blur - The
filterattribute of the<rect>element points the element to the "f1" filter
SVG <feGaussianBlur>
The stdDeviation attribute defines the amount of the blur.
A higher value results in a more blurry image:
Here is the SVG code:
Example
<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter
id="f2" x="0" y="0" xmlns="http://www.w3.org/2000/svg">
<feGaussianBlur in="SourceGraphic" stdDeviation="55" />
</filter>
</defs>
<rect width="90" height="90"
fill="yellow" filter="url(#f2)" />
</svg>
Try it Yourself »
