filter

The filter attribute specifies the filter effects defined by the {{SVGElement("filter")}}  element that shall be applied to its element.

[!NOTE] As a presentation attribute, filter also has a CSS property counterpart: {{cssxref("filter")}} . When both are specified, the CSS property takes priority.

Technically, filter can be applied to any element, but it only has effect on container elements without the {{SVGElement("defs")}}  element, all graphics elements, and the {{SVGElement("use")}}  element.

Example

html,
body,
svg {
  height: 100%;
}

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <filter id="blur">
    <feGaussianBlur stdDeviation="2" />
  </filter>

  <rect x="10" y="10" width="80" height="80" filter="url(#blur)" />
</svg>

{{EmbedLiveSample("Example", "220", "220")}} 

Usage notes

For a description of the values see the CSS {{cssxref("filter")}}  property.

Specifications

{{Specifications}} 

Browser compatibility

{{Compat}} 

See also

• {{SVGElement("filter")}} 
• CSS {{cssxref("filter")}}  property