SVG Tutorials

SVG Blur Filter in HTML

SVG Blur Filter



All SVG filters are defined by < defs > element. It is used for the definition of the filter which is to be used.

The < filter > element is used to define an SVG filter. The element has a required id attribute that identifies the filter.

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


Code explanation of the below code is:-


  • The id attribute of the element defines a unique name for it.
  • The blur effect is defined with the element.
  • The in="SourceGraphic" part defines that the effect is created for the entire element.
  • The stdDeviation attribute defines the amount of blur.
  • The filter attribute of the element links the element to the "blur_filter" filter.

Code Explanation

All Tutorials related to SVG Tutorials

All Sections related to SVG