<filter>
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
The<filter>SVG element defines a custom filter effect by grouping atomic filter primitives. It is never rendered itself, but must be used by thefilter attribute on SVG elements, or thefilterCSS property for SVG/HTML elements.
Usage context
| Categories | None |
|---|---|
| Permitted content | Any number of the following elements, in any order: Descriptive elements Filter primitive elements <animate>,<set> |
Attributes
Note:For<filter>, thex andy attributes default to-10%, and thewidth andheight attributes default to120%. This is because many filter effects, such as<feGaussianBlur>, extend beyond the bounds of the element being filtered. The default sizing ensures that the filter effect is not clipped.
DOM Interface
This element implements theSVGFilterElement interface.
Examples
Adding a blur effect
SVG
<svg width="230" height="120" xmlns="http://www.w3.org/2000/svg"> <filter> <feGaussianBlur stdDeviation="5" /> </filter> <circle cx="60" cy="60" r="50" fill="green" /> <circle cx="170" cy="60" r="50" fill="green" filter="url(#blurMe)" /></svg>Result
Specifications
| Specification |
|---|
| Filter Effects Module Level 1 # FilterElement |