<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).
<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.
<feGaussianBlur> element is used to create blur effects:
Here is the SVG code:
<svg height="110" width="110"> <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>
- The id attribute of the
<filter>element defines a unique name for the filter
- The blur effect is defined with the
in="SourceGraphic"part defines that the effect is created for the entire element
stdDeviationattribute defines the amount of the blur
- The filter attribute of the
<rect>element links the element to the