Widely Available
SVG
id: svg-filters
SVG filters
The
<filter> SVG element applies custom effects such as color manipulation, blurring, or morphing to SVG elements.
Baseline Status:
Achieved Widely Available on Jan 29, 2018 (Cross-browser Newly Available since Jul 29, 2015).
Desktop Browser Engine Support
Google Chrome
5
Supported
Mozilla Firefox
3
Supported
Apple Safari
6
Supported
Microsoft Edge
12
Supported
Mobile Browser Engine Support
Chrome Android
18
Firefox Android
4
Safari iOS
6
Specifications and References
MDN Browser Compat Data Keys:
api.SVGFEBlendElement ↗
api.SVGFEBlendElement.height ↗
api.SVGFEBlendElement.in1 ↗
api.SVGFEBlendElement.in2 ↗
api.SVGFEBlendElement.mode ↗
api.SVGFEBlendElement.result ↗
api.SVGFEBlendElement.width ↗
api.SVGFEBlendElement.x ↗
api.SVGFEBlendElement.y ↗
api.SVGFEColorMatrixElement ↗
api.SVGFEColorMatrixElement.height ↗
api.SVGFEColorMatrixElement.in1 ↗
api.SVGFEColorMatrixElement.result ↗
api.SVGFEColorMatrixElement.type ↗
api.SVGFEColorMatrixElement.values ↗
api.SVGFEColorMatrixElement.width ↗
api.SVGFEColorMatrixElement.x ↗
api.SVGFEColorMatrixElement.y ↗
api.SVGFEComponentTransferElement ↗
api.SVGFEComponentTransferElement.height ↗
api.SVGFEComponentTransferElement.in1 ↗
api.SVGFEComponentTransferElement.result ↗
api.SVGFEComponentTransferElement.width ↗
api.SVGFEComponentTransferElement.x ↗
api.SVGFEComponentTransferElement.y ↗
api.SVGFECompositeElement ↗
api.SVGFECompositeElement.height ↗
api.SVGFECompositeElement.in1 ↗
api.SVGFECompositeElement.in2 ↗
api.SVGFECompositeElement.k1 ↗
api.SVGFECompositeElement.k2 ↗
api.SVGFECompositeElement.k3 ↗
api.SVGFECompositeElement.k4 ↗
api.SVGFECompositeElement.operator ↗
api.SVGFECompositeElement.result ↗
api.SVGFECompositeElement.width ↗
api.SVGFECompositeElement.x ↗
api.SVGFECompositeElement.y ↗
api.SVGFEConvolveMatrixElement ↗
api.SVGFEConvolveMatrixElement.bias ↗
api.SVGFEConvolveMatrixElement.divisor ↗
api.SVGFEConvolveMatrixElement.edgeMode ↗
api.SVGFEConvolveMatrixElement.height ↗
api.SVGFEConvolveMatrixElement.in1 ↗
api.SVGFEConvolveMatrixElement.kernelMatrix ↗
api.SVGFEConvolveMatrixElement.kernelUnitLengthX ↗
api.SVGFEConvolveMatrixElement.kernelUnitLengthY ↗
api.SVGFEConvolveMatrixElement.orderX ↗
api.SVGFEConvolveMatrixElement.orderY ↗
api.SVGFEConvolveMatrixElement.preserveAlpha ↗
api.SVGFEConvolveMatrixElement.result ↗
api.SVGFEConvolveMatrixElement.targetX ↗
api.SVGFEConvolveMatrixElement.targetY ↗
api.SVGFEConvolveMatrixElement.width ↗
api.SVGFEConvolveMatrixElement.x ↗
api.SVGFEConvolveMatrixElement.y ↗
api.SVGFEDiffuseLightingElement ↗
api.SVGFEDiffuseLightingElement.diffuseConstant ↗
api.SVGFEDiffuseLightingElement.height ↗
api.SVGFEDiffuseLightingElement.in1 ↗
api.SVGFEDiffuseLightingElement.kernelUnitLengthX ↗
api.SVGFEDiffuseLightingElement.kernelUnitLengthY ↗
api.SVGFEDiffuseLightingElement.result ↗
api.SVGFEDiffuseLightingElement.surfaceScale ↗
api.SVGFEDiffuseLightingElement.width ↗
api.SVGFEDiffuseLightingElement.x ↗
api.SVGFEDiffuseLightingElement.y ↗
api.SVGFEDisplacementMapElement ↗
api.SVGFEDisplacementMapElement.height ↗
api.SVGFEDisplacementMapElement.in1 ↗
api.SVGFEDisplacementMapElement.in2 ↗
api.SVGFEDisplacementMapElement.result ↗
api.SVGFEDisplacementMapElement.scale ↗
api.SVGFEDisplacementMapElement.width ↗
api.SVGFEDisplacementMapElement.x ↗
api.SVGFEDisplacementMapElement.xChannelSelector ↗
api.SVGFEDisplacementMapElement.y ↗
api.SVGFEDisplacementMapElement.yChannelSelector ↗
api.SVGFEDistantLightElement ↗
api.SVGFEDistantLightElement.azimuth ↗
api.SVGFEDistantLightElement.elevation ↗
api.SVGFEDropShadowElement ↗
api.SVGFEDropShadowElement.dx ↗
api.SVGFEDropShadowElement.dy ↗
api.SVGFEDropShadowElement.height ↗
api.SVGFEDropShadowElement.in1 ↗
api.SVGFEDropShadowElement.result ↗
api.SVGFEDropShadowElement.setStdDeviation ↗
api.SVGFEDropShadowElement.stdDeviationX ↗
api.SVGFEDropShadowElement.stdDeviationY ↗
api.SVGFEDropShadowElement.width ↗
api.SVGFEDropShadowElement.x ↗
api.SVGFEDropShadowElement.y ↗
api.SVGFEFloodElement ↗
api.SVGFEFloodElement.height ↗
api.SVGFEFloodElement.result ↗
api.SVGFEFloodElement.width ↗
api.SVGFEFloodElement.x ↗
api.SVGFEFloodElement.y ↗
api.SVGFEFuncAElement ↗
api.SVGFEFuncBElement ↗
api.SVGFEFuncGElement ↗
api.SVGFEFuncRElement ↗
api.SVGFEGaussianBlurElement ↗
api.SVGFEGaussianBlurElement.edgeMode ↗
api.SVGFEGaussianBlurElement.height ↗
api.SVGFEGaussianBlurElement.in1 ↗
api.SVGFEGaussianBlurElement.result ↗
api.SVGFEGaussianBlurElement.setStdDeviation ↗
api.SVGFEGaussianBlurElement.stdDeviationX ↗
api.SVGFEGaussianBlurElement.stdDeviationY ↗
api.SVGFEGaussianBlurElement.width ↗
api.SVGFEGaussianBlurElement.x ↗
api.SVGFEGaussianBlurElement.y ↗
api.SVGFEImageElement ↗
api.SVGFEImageElement.crossOrigin ↗
api.SVGFEImageElement.height ↗
api.SVGFEImageElement.href ↗
api.SVGFEImageElement.preserveAspectRatio ↗
api.SVGFEImageElement.result ↗
api.SVGFEImageElement.width ↗
api.SVGFEImageElement.x ↗
api.SVGFEImageElement.y ↗
api.SVGFEMergeElement ↗
api.SVGFEMergeElement.height ↗
api.SVGFEMergeElement.result ↗
api.SVGFEMergeElement.width ↗
api.SVGFEMergeElement.x ↗
api.SVGFEMergeElement.y ↗
api.SVGFEMergeNodeElement ↗
api.SVGFEMergeNodeElement.in1 ↗
api.SVGFEMorphologyElement ↗
api.SVGFEMorphologyElement.height ↗
api.SVGFEMorphologyElement.in1 ↗
api.SVGFEMorphologyElement.operator ↗
api.SVGFEMorphologyElement.radiusX ↗
api.SVGFEMorphologyElement.radiusY ↗
api.SVGFEMorphologyElement.result ↗
api.SVGFEMorphologyElement.width ↗
api.SVGFEMorphologyElement.x ↗
api.SVGFEMorphologyElement.y ↗
api.SVGFEOffsetElement ↗
api.SVGFEOffsetElement.dx ↗
api.SVGFEOffsetElement.dy ↗
api.SVGFEOffsetElement.height ↗
api.SVGFEOffsetElement.in1 ↗
api.SVGFEOffsetElement.result ↗
api.SVGFEOffsetElement.width ↗
api.SVGFEOffsetElement.x ↗
api.SVGFEOffsetElement.y ↗
api.SVGFEPointLightElement ↗
api.SVGFEPointLightElement.x ↗
api.SVGFEPointLightElement.y ↗
api.SVGFEPointLightElement.z ↗
api.SVGFESpecularLightingElement ↗
api.SVGFESpecularLightingElement.height ↗
api.SVGFESpecularLightingElement.in1 ↗
api.SVGFESpecularLightingElement.kernelUnitLengthX ↗
api.SVGFESpecularLightingElement.kernelUnitLengthY ↗
api.SVGFESpecularLightingElement.result ↗
api.SVGFESpecularLightingElement.specularConstant ↗
api.SVGFESpecularLightingElement.specularExponent ↗
api.SVGFESpecularLightingElement.surfaceScale ↗
api.SVGFESpecularLightingElement.width ↗
api.SVGFESpecularLightingElement.x ↗
api.SVGFESpecularLightingElement.y ↗
api.SVGFESpotLightElement ↗
api.SVGFESpotLightElement.limitingConeAngle ↗
api.SVGFESpotLightElement.pointsAtX ↗
api.SVGFESpotLightElement.pointsAtY ↗
api.SVGFESpotLightElement.pointsAtZ ↗
api.SVGFESpotLightElement.specularExponent ↗
api.SVGFESpotLightElement.x ↗
api.SVGFESpotLightElement.y ↗
api.SVGFESpotLightElement.z ↗
api.SVGFETileElement ↗
api.SVGFETileElement.height ↗
api.SVGFETileElement.in1 ↗
api.SVGFETileElement.result ↗
api.SVGFETileElement.width ↗
api.SVGFETileElement.x ↗
api.SVGFETileElement.y ↗
api.SVGFETurbulenceElement ↗
api.SVGFETurbulenceElement.baseFrequencyX ↗
api.SVGFETurbulenceElement.baseFrequencyY ↗
api.SVGFETurbulenceElement.height ↗
api.SVGFETurbulenceElement.numOctaves ↗
api.SVGFETurbulenceElement.result ↗
api.SVGFETurbulenceElement.seed ↗
api.SVGFETurbulenceElement.stitchTiles ↗
api.SVGFETurbulenceElement.type ↗
api.SVGFETurbulenceElement.width ↗
api.SVGFETurbulenceElement.x ↗
api.SVGFETurbulenceElement.y ↗
api.SVGFilterElement ↗
api.SVGFilterElement.filterUnits ↗
api.SVGFilterElement.height ↗
api.SVGFilterElement.href ↗
api.SVGFilterElement.primitiveUnits ↗
api.SVGFilterElement.width ↗
api.SVGFilterElement.x ↗
api.SVGFilterElement.y ↗
css.properties.color-interpolation-filters ↗
css.properties.color-interpolation-filters.auto ↗
css.properties.color-interpolation-filters.linearRGB ↗
css.properties.color-interpolation-filters.sRGB ↗
css.properties.filter.svg_elements ↗
css.properties.flood-color ↗
css.properties.flood-color.currentColor ↗
css.properties.flood-color.transparent ↗
css.properties.flood-opacity ↗
css.properties.lighting-color ↗
css.properties.lighting-color.currentColor ↗
css.properties.lighting-color.transparent ↗
svg.elements.feBlend ↗
svg.elements.feBlend.in ↗
svg.elements.feBlend.in2 ↗
svg.elements.feBlend.mode ↗
svg.elements.feColorMatrix ↗
svg.elements.feColorMatrix.in ↗
svg.elements.feColorMatrix.type ↗
svg.elements.feColorMatrix.values ↗
svg.elements.feComponentTransfer ↗
svg.elements.feComponentTransfer.in ↗
svg.elements.feComposite ↗
svg.elements.feComposite.in ↗
svg.elements.feComposite.in2 ↗
svg.elements.feComposite.k1 ↗
svg.elements.feComposite.k2 ↗
svg.elements.feComposite.k3 ↗
svg.elements.feComposite.k4 ↗
svg.elements.feComposite.operator ↗
svg.elements.feComposite.operator.lighter_value ↗
svg.elements.feConvolveMatrix ↗
svg.elements.feConvolveMatrix.bias ↗
svg.elements.feConvolveMatrix.divisor ↗
svg.elements.feConvolveMatrix.edgeMode ↗
svg.elements.feConvolveMatrix.in ↗
svg.elements.feConvolveMatrix.kernelMatrix ↗
svg.elements.feConvolveMatrix.kernelUnitLength ↗
svg.elements.feConvolveMatrix.order ↗
svg.elements.feConvolveMatrix.preserveAlpha ↗
svg.elements.feConvolveMatrix.targetX ↗
svg.elements.feConvolveMatrix.targetY ↗
svg.elements.feDiffuseLighting ↗
svg.elements.feDiffuseLighting.diffuseConstant ↗
svg.elements.feDiffuseLighting.in ↗
svg.elements.feDiffuseLighting.kernelUnitLength ↗
svg.elements.feDiffuseLighting.surfaceScale ↗
svg.elements.feDisplacementMap ↗
svg.elements.feDisplacementMap.in ↗
svg.elements.feDisplacementMap.in2 ↗
svg.elements.feDisplacementMap.scale ↗
svg.elements.feDisplacementMap.xChannelSelector ↗
svg.elements.feDisplacementMap.yChannelSelector ↗
svg.elements.feDistantLight ↗
svg.elements.feDistantLight.azimuth ↗
svg.elements.feDistantLight.elevation ↗
svg.elements.feDropShadow ↗
svg.elements.feDropShadow.dx ↗
svg.elements.feDropShadow.dy ↗
svg.elements.feDropShadow.in ↗
svg.elements.feDropShadow.stdDeviation ↗
svg.elements.feFlood ↗
svg.elements.feFuncA ↗
svg.elements.feFuncB ↗
svg.elements.feFuncG ↗
svg.elements.feFuncR ↗
svg.elements.feGaussianBlur ↗
svg.elements.feGaussianBlur.edgeMode ↗
svg.elements.feGaussianBlur.in ↗
svg.elements.feGaussianBlur.stdDeviation ↗
svg.elements.feImage ↗
svg.elements.feImage.crossorigin ↗
svg.elements.feImage.href ↗
svg.elements.feImage.preserveAspectRatio ↗
svg.elements.feMerge ↗
svg.elements.feMergeNode ↗
svg.elements.feMergeNode.in ↗
svg.elements.feMorphology ↗
svg.elements.feMorphology.in ↗
svg.elements.feMorphology.operator ↗
svg.elements.feMorphology.radius ↗
svg.elements.feOffset ↗
svg.elements.feOffset.dx ↗
svg.elements.feOffset.dy ↗
svg.elements.feOffset.in ↗
svg.elements.fePointLight ↗
svg.elements.fePointLight.x ↗
svg.elements.fePointLight.y ↗
svg.elements.fePointLight.z ↗
svg.elements.feSpecularLighting ↗
svg.elements.feSpecularLighting.in ↗
svg.elements.feSpecularLighting.kernelUnitLength ↗
svg.elements.feSpecularLighting.specularConstant ↗
svg.elements.feSpecularLighting.specularExponent ↗
svg.elements.feSpecularLighting.surfaceScale ↗
svg.elements.feSpotLight ↗
svg.elements.feSpotLight.limitingConeAngle ↗
svg.elements.feSpotLight.pointsAtX ↗
svg.elements.feSpotLight.pointsAtY ↗
svg.elements.feSpotLight.pointsAtZ ↗
svg.elements.feSpotLight.specularExponent ↗
svg.elements.feSpotLight.x ↗
svg.elements.feSpotLight.y ↗
svg.elements.feSpotLight.z ↗
svg.elements.feTile ↗
svg.elements.feTile.in ↗
svg.elements.feTurbulence ↗
svg.elements.feTurbulence.baseFrequency ↗
svg.elements.feTurbulence.numOctaves ↗
svg.elements.feTurbulence.seed ↗
svg.elements.feTurbulence.stitchTiles ↗
svg.elements.feTurbulence.type ↗
svg.elements.filter ↗
svg.elements.filter.filterUnits ↗
svg.elements.filter.height ↗
svg.elements.filter.primitiveUnits ↗
svg.elements.filter.width ↗
svg.elements.filter.x ↗
svg.elements.filter.y ↗
svg.global_attributes.filter ↗
svg.global_attributes.flood-color ↗
svg.global_attributes.flood-opacity ↗