Note: Internet Explorer and Safari do not support SVG filters!
1.15.1.
<defs>
and
<filter>
¶
All SVG filters for the Internet are defined in
<defs>
element.
<defs>
element definitions are short and contain special element definitions, such as filters.
<filter>
tags are used to define SVG filters.
<filter>
the tag usesthe required id attribute to define which filter to apply to the drawing?
1.15.2.
SVG
<feGaussianBlur>
¶
Example 1 ¶
<feGaussianBlur>
elements are used to create blur effects:
Here is the SVG code:
Example
<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>
Code parsing:
-
<filter>the element id attribute defines a unique name for a filter -
<feGaussianBlur>element definition blur effect -
The in= “SourceGraphic” section defines the effect created by the entire image
-
StdDeviation attribute defines fuzzy quantity
-
<rect>the filter attribute of the element is used to link the element to the “F1” filter