<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 the filter attribute on SVG elements, or the filter CSS 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>, <discard>, <set> |
Attributes
xywidthheightfilterUnitsprimitiveUnitsxlink:hrefDeprecated
Note:
For <filter>, the x and y attributes default to -10%, and the width and height attributes default to 120%. 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 the SVGFilterElement interface.
Examples
Adding a blur effect
SVG
<svg width="230" height="120" xmlns="http://www.w3.org/2000/svg">
<filter id="blurMe">
<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 |
Browser compatibility
Loading…