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.

Example

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

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
filter
?
?
?
?
?
?
?
?
?
?
?
?

See also

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