SVG Blur Effects

Description of SVG filters

All SVG filters are defined inside a <defs> element. The <defs> element is a short form of definitions. It contains a definition of specific elements like filters.

The <filter> element defines an SVG filter. This element has an "id" attribute (required) identifying the filter. The <filter> element is not rendered directly. Its only usage is the case when it can be referenced with the "filter" attribute in SVG, and the url() function in CSS.

Each <filter> element contains different filter elements as its children. Such filter primitives perform one essential graphical operation on one or more inputs and output only one result. Besides using the result of other primitives as input, a filter primitive can also accept other inputs such as SourceGraphic and SourceAlpha.

All filter elements contain the fe prefix, which stands for “filter effect”.

Now there are 17 filter primitives that are defined in the SVG Filter specification.

In our example, we use the <feGaussianBlur> element to create a blur effect.

Example of creating a blur effect:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="150" height="150">
      <defs>
        <filter id="filter" x="0" y="0">
          <feGaussianBlur in="SourceGraphic" stdDeviation="20" />
        </filter>
      </defs>
      <rect width="110" height="110" stroke="green" stroke-width="5" fill="lightblue" filter="url(#filter)" /> 
      Sorry, your browser doesn't support inline SVG.
    </svg>
  </body>
</html>

Code explanation:

  • The <filter> element’s "id" attribute specifies a unique name for the filter.
  • The blur effect is specified with the <feGaussianBlur> element.
  • The in="SourceGraphic" part specifies that the effect is created for the whole element.
  • The "stdDeviation" attribute specifies the amount of the blur.
  • The <rect> element’s "filter" attribute links the element to the "filter" filter.



Do you find this helpful?

Related articles