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
id
attribute 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
stdDeviation
attribute defines the amount of the blur - The
filter
attribute 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 »