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="">
  <filter id="blur">
    <feGaussianBlur stdDeviation="2" />

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

Usage notes

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

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


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

Update compatibility data on GitHub
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
filterChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?


Compatibility unknown  
Compatibility unknown

See also