filter

The filter attribute specifies the filter effects defined by the <filter> element that shall be applied to its element.

Note: As a presentation attribute, filter also has a CSS property counterpart: 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 <defs> element, all graphics elements, and the <use> element.

Example

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

html

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

Usage notes

Value	`none` \| `<filter-value-list>`
Default value	`none`
Animatable	Yes

For a description of the values see the CSS filter property.

filter

Example

Usage notes

Specifications

Browser compatibility

See also

In this article