X
HOME HTML5 CSS3 JAVASCRIPT SQL PHP5 JQUERY ANGULAR BOOTSTRAP3 XML MORE...
REFERENCES | EXAMPLES | FORUM | ABOUT

SVG Blur Effects


<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).

The <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.


SVG <feGaussianBlur>

Example 1

The <feGaussianBlur> element is used to create blur effects:

fegaussianblur

Here is the SVG code:

Example

<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 a unique name for the filter
  • The blur effect is defined with the <feGaussianBlur> element
  • The in="SourceGraphic" part defines that the effect is created for the entire element
  • The stdDeviation attribute defines the amount of the blur
  • The filter attribute of the <rect> element links the element to the "f1" filter


Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

WEB HOSTING

UK Reseller Hosting

WEB BUILDING

Download XML Editor FREE Website BUILDER Free HTML5 Templates

SHARE THIS PAGE

facebook