SVG Blur Effects

SVG uses the<feGaussianBlur>element to show the blur effect. SVG filters does not supported by Internet Explorer 9 and earlier versions

Example

<!DOCTYPE html>
<html>
<body>


<svg height="250" width="250">
  <defs>
    <filter id="p1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>
  <rect width="120" height="120" stroke="green" stroke-width="3" fill="purple" filter="url(#p1)" />
</svg>

</body>
</html>

Test it Now

Explanation

The id attribute of <filter> defines a unique name for the pattern.
<feGaussianBlur> element is used to define blur effect.
The in="SourceGraphic" part of <feGaussianBlur> element is used to define that the effect is created for the entire element.
The stdDeviation attribute is used to define the amount of the blur.
The filter attribute of the <rect> element is used to link the element to the "p1" filter.

Next TopicSVG Drop Shadow Effect

← prev next →