SVG Blur Effects

<defs> and <filter>

All SVG filters are in <defs> defined in the element.<defs> The element is an abbreviation for definitions, which contains definitions of special elements (such as filters).

<filter> The element is used to define SVG filters.<filter> The element has a required id attribute to identify the filter. Then the graphics will point to the filter to be used.

SVG <feGaussianBlur>

Example 1

<feGaussianBlur> Elements used to create blur effects:

This 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>

Try It Yourself

Code Explanation:

• The id attribute of the <filter> element defines the unique name of the filter
• The <feGaussianBlur> element defines the blur effect
• The attribute "in="SourceGraphic"" defines the effect created for the entire element
• The stdDeviation attribute defines the amount of blur
• The filter attribute of the <rect> element links the element to the "f1" filter