SVG blur - Gaussian blur
Note: Internet Explorer and Safari does not support SVG filters!
<Defs> and <filter>
SVG filters all Internet defined in <defs> element. <Defs> element defines short and contains special elements (such as filters) definition.
<Filter> tag is used to define SVG filter. <Filter> tag with the required id attribute to define the graphical application which filters?
SVG <feGaussianBlur>
Example 1
<FeGaussianBlur> element is used to create a blur effect:
Here is the SVG Code:
Examples
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f1)" />
</svg>
<defs>
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f1)" />
</svg>
try it"
For Opera users: view SVG file (right-click on the preview source SVG graphics).
Code analysis:
- The only name <filter> element id attribute defines a filter
- <FeGaussianBlur> element defines blur
- in = "SourceGraphic" This section defines the effect created by the entire image
- stdDeviation attribute defines the amount of blur
- Filter Properties <rect> element is used to link the elements to "f1" filter