View source for SVG filter effects

{{Infobox technology standard
| title = Filter Effects
| long_name = Filter Effects Module Level 1
| image = Extended_two_cube_calendar.svg
| caption = Wood texture and drop shadow simulated with {{nobr|SVG filters}}
| status = [[World Wide Web Consortium#Working draft (WD)|Working Draft (WD)]]
| year_started = {{Start date|2012|10|15|df=y}}
| first_published = {{Start date|2012|10|15|df=y}}
| version_date = {{Start date|2018|12|18}}
| organization = [[World Wide Web Consortium|{{abbr|W3C|World Wide Web Consortium}}]]
| editors = {{plainlist|
* Dirk Schulze
* Dean Jackson
* Vincent Hardy
* Erik Dahlström
}}
| domain = [[Visual effects]]
| committee = [[CSS Working Group]]
| preview = Editor's Draft
| preview_date = {{Start date|2019|10|30}}
}}
{{SVGSeries}}
'''SVG filter effects''' are effects applied to [[Scalable Vector Graphics]] (SVG) files. SVG is an [[open standard|open-standard]] [[XML|XML format]] for two-dimensional [[vector graphics]] as defined by the [[World Wide Web Consortium]] (W3C). A '''filter effect''' consists of a series of graphics operations that are applied to a given source vector graphic to produce a modified [[bitmapped]] result.
Filter effects are defined by filter elements. The {{Code|filter}} property is set on a container element or on a graphics element to apply a filter effect to it. Each {{Code|filter}} element contains a set of filter primitives as its children. Each filter primitive performs a single fundamental graphical operation (e.g., a [[Gaussian blur]] or a lighting effect) on one or more inputs, producing a graphical result. Because most of the filter primitives represent some form of image processing, in most cases the output from a filter primitive is a single [[RGBA color space|RGBA]] bitmap image (however, it will be regenerated if a higher resolution is called on).
The original source graphic or the result from a filter primitive can be used as input into one or more other filter primitives. A common application is to use the source graphic multiple times. For example, a simple filter could replace one graphic for two by adding a black copy of the original source graphic but offset to create a [[drop shadow]]. In effect, there are now two layers of graphics, both with the same original source graphics.
==SVG filter primitives==
[[File:Catan_Universe_fixed_setup.svg|thumb|250px|Example SVG using various filter primitives
{|
|valign="top"|Textures:||''feTurbulence'', ''feDiffuseLighting'', ''feDistantLight'', ''feComposite'' and ''feBlend''
|-
|valign="top"|Shadows: ||''feGaussianBlur'', ''feOffset'', ''feColorMatrix'' and ''feBlend''
|}]]
[[File:demo_animated_feTurbulence_feDisplacementMap_mask_SMIL.svg|thumb|250px|link={{filepath:demo_animated_feTurbulence_feDisplacementMap_mask_SMIL.svg}}|Demonstration of an animated refraction effect using ''feTurbulence'', ''feDisplacementMap'' and [[Synchronized Multimedia Integration Language]] ]]
The following table lists the filter primitives available in both SVG 1.0 and SVG 1.1. SVG Tiny does not support filter effects, while [[SVG Basic#Mobile profiles|SVG Basic]] supports only those filter primitives shown:
{| class="wikitable"
!Name
!Element
!SVG Basic
|-
! Blend
| <code>feBlend</code>
| {{yes}}
|-
! Color matrix
| <code>feColorMatrix</code>
| {{yes}}
|-
! Component transfer
| <code>feComponentTransfer</code>
| {{yes}}
|-
! Composite
| <code>feComposite</code>
| {{yes}}
|-
! [[Convolution|Convolve matrix]]
| <code>feConvolveMatrix</code>
| {{no}}
|-
! [[Diffuse reflection|Diffuse lighting]]
| <code>feDiffuseLighting</code>
| {{no}}
|-
! [[Displacement map]]
| <code>feDisplacementMap</code>
| {{no}}
|-
! Flood
| <code>feFlood</code>
| {{yes}}
|-
! [[Gaussian blur]]
| <code>feGaussianBlur</code>
| {{yes}}
|-
! Image
| <code>feImage</code>
| {{yes}}
|-
! Merge
| <code>feMerge</code>
| {{yes}}
|-
! Morphology
| <code>feMorphology</code>
| {{no}}
|-
! Offset
| <code>feOffset</code>
| {{yes}}
|-
! [[Specular highlight|Specular lighting]]
| <code>feSpecularLighting</code>
| {{no}}
|-
! Tile
| <code>feTile</code>
| {{yes}}
|-
! [[Perlin noise|Turbulence]]
| <code>feTurbulence</code>
| {{no}}
|}
The current draft of the Filter Effects Module Level 1 adds a filter primitive for [[drop shadow]]. This primitive, <code>feDropShadow</code>, is just a shorthand for a combination of other filter primitives.<ref>{{Cite web|title=Filter Effects Module Level 1|url=https://www.w3.org/TR/2018/WD-filter-effects-1-20181218/Overview.html#elementdef-fedropshadow|access-date=2023-01-14|website=www.w3.org |date=18 December 2018 |editor-first1=Dirk |editor-last1=Schulze |editor-first2=Dean |editor-last2=Jackson}}</ref>
==Framework for applying a filter==
<syntaxhighlight lang="xml">
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg"
version="1.1"
viewBox="0 0 400 300">
<defs>
<filter id="AFilter">
<!-- Definition of filter goes here -->
</filter>
</defs>
<text x="10" y="100" filter="url(#AFilter)">a filter applied</text>
</svg>
</syntaxhighlight>
==External links==
* [https://www.w3.org/TR/SVG11/filters.html Filter Effects – SVG 1.1 (Second Edition)] W3C specifications
* [https://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#filters W3C SVG primer: Filters] W3C Primer (draft) chapter and examples concerning filters.
* [https://github.com/jorgeatgu/SVG-FILTERS/ FILDROP] A set of custom SVG filter effects and generator filter effects
* [https://svgfilters.com/ SVG Filter Builder] An interactive, visual SVG filter programming tool which can be used both for visualising existing filters (by uploading a SVG) but also to design your own from scratch and save them.
==References==
{{reflist}}
{{W3C standards}}
[[Category:Scalable Vector Graphics]]