W3cubDocs

/SVG

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 can be used as a CSS property. See css filter for further information.

As a presentation attribute, it 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.

<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-function-list>
Default value none
Animatable Yes

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

Specifications

Specification Status Comment
Filter Effects Module Level 1
The definition of 'filter' in that specification.
Working Draft Extended the values by several special filter functions.
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'filter' in that specification.
Recommendation Initial definition

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
filter ? ? ? ? ? ?
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
filter ? ? ? ? ? ?

See also

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/filter