SVG Blur Effects
Note: Internet Explorer and Safari do not support SVG filters yet!
<defs> and <filter>
All internet SVG filters are defined within a <defs> element. The <defs> element is short
for definitions and contains definition of special elements (such as filters).
The <filter> element is used to define an SVG filter. The <filter> element has a
required id attribute which identifies the filter. The graphic then points to the filter to use.
The <feGaussianBlur> element is used to create blur effects:
Here is the SVG code:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
Try it yourself »
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="15"
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f1)" />
For Opera users: View the SVG file (right-click on the SVG graphic to view the source).
- 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 links the element to the "f1" filter
Thank You For Helping Us!
Your message has been sent to W3Schools.