SVG blur effect

Note: Internet Explorer and Safari do not support SVG filters!

`<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?

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