<filter> - SVG: Scalable Vector Graphics

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>`, `<set>`

Attributes

Global attributes

Specific attributes

DOM Interface

This element implements the SVGFilterElement interface.

Example

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

Screenshot	Live sample

Specifications

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

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`filter`	Chrome Full support 1	Edge Full support 12	Firefox Full support 4	IE Full support 10	Opera Full support 9	Safari Full support 3	WebView Android Full support Yes	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 10.1	Safari iOS Full support 3	Samsung Internet Android Full support 1.0
`filterRes`	Chrome ?	Edge ?	Firefox ?	IE ?	Opera ?	Safari ?	WebView Android ?	Chrome Android ?	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android ?
`filterUnits`	Chrome ?	Edge ?	Firefox ?	IE ?	Opera ?	Safari ?	WebView Android ?	Chrome Android ?	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android ?
`height`	Chrome ?	Edge ?	Firefox ?	IE ?	Opera ?	Safari ?	WebView Android ?	Chrome Android ?	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android ?
`primitiveUnits`	Chrome ?	Edge ?	Firefox ?	IE ?	Opera ?	Safari ?	WebView Android ?	Chrome Android ?	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android ?
`width`	Chrome ?	Edge ?	Firefox ?	IE ?	Opera ?	Safari ?	WebView Android ?	Chrome Android ?	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android ?
`x`	Chrome ?	Edge ?	Firefox ?	IE ?	Opera ?	Safari ?	WebView Android ?	Chrome Android ?	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android ?
`xlink:href` Deprecated	Chrome ?	Edge ?	Firefox ?	IE ?	Opera ?	Safari ?	WebView Android ?	Chrome Android ?	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android ?
`y`	Chrome ?	Edge ?	Firefox ?	IE ?	Opera ?	Safari ?	WebView Android ?	Chrome Android ?	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android ?

Legend

Full support: Full support
Compatibility unknown: Compatibility unknown
Deprecated. Not for use in new websites.: Deprecated. Not for use in new websites.