The <filter> SVG element defines a custom filter effect by grouping atomic filter primitives. It is never rendered itself, but must be used by the filter attribute on SVG elements, or the filter CSS property for SVG/HTML elements.

Usage context

Permitted contentAny number of the following elements, in any order:
Descriptive elements
Filter primitive elements
<animate>, <set>


Global attributes

Specific attributes

DOM Interface

This element implements the SVGFilterElement interface.



<svg width="230" height="120" xmlns="http://www.w3.org/2000/svg">
 <filter id="blurMe">
   <feGaussianBlur stdDeviation="5"/>

 <circle cx="60" cy="60" r="50" fill="green" />

 <circle cx="170" cy="60" r="50" fill="green"
          filter="url(#blurMe)" />


ScreenshotLive sample


Specification Status Comment
Filter Effects Module Level 1
The definition of '<filter>' in that specification.
Working Draft
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of '<filter>' in that specification.
Recommendation Initial definition

Browser compatibility

BCD tables only load in the browser

See also