SVG
filters
Zoeken…
Syntaxis
- Filterdeclaratie:
<filter id="filter-id"> ... lijst met onderliggende primitieven ...</filter> - Filter toepassen via SVG-kenmerk:
<elementname filter="url(#filter-id)" ... /> - Filter toepassen via CSS-eigenschap: (-prefix- ) filter: url ("# filter-id");
parameters
| Element attributen | Details |
|---|---|
| Filterregio | Het filterelement kan optioneel de positie, afmetingen, resolutie en eenheden definiëren voor de uitvoer van een filtereffect. De positie en afmetingen van een filter kunnen worden gespecificeerd met behulp van de volgende parameters: x, y, breedte, hoogte. De standaardwaarden zijn niet intuïtief en zijn: x: -10% y: -10% breedte: 120% hoogte: 120% |
| Filter resolutie | Het kenmerk filterRes is een optioneel kenmerk in SVG 1.1 dat kan worden gebruikt om de resolutie op te geven waarmee het filter wordt verwerkt. Dit kenmerk werd ongelijk ondersteund en is nu in de huidige browsers verouderd. |
| Filtereenheden | Standaard worden de eenheden en het coördinatensysteem voor het filtereffectengebied (x, y, breedte, hoogte) van een filterelement ingesteld ten opzichte van het selectiekader van het element dat naar het filter verwijst. In SVG-termen wordt dit de "objectBoundingBox" genoemd. Wanneer we x = "50%" schrijven, betekent dit "stel de startpositie x in van het filtergebied aan de linkerkant van het selectiekader van het referentie-element + 50% van de breedte van het element". Maar u kunt ook de eenheden en coördinaten expliciet opgeven door de eigenschap filterUnits in te stellen. De twee alternatieven zijn "objectBoundingBox" (de standaardinstelling die we zojuist hebben beschreven) of "userSpaceOnUse". userSpaceOnUse stelt de filtereenheden en het coördinatensysteem in op het canvas van het referentie-element of, in SVG-termen, de "userSpaceOnUse". |
| Primitieve eenheden | Naast het eenheidssysteem voor het filter zelf, kunt u ook het eenheidssysteem opgeven dat de onderliggende filterprimitieven van het filter zullen gebruiken via het kenmerk primitiveUnits. Nogmaals, de keuze is tussen userSpaceOnUse en objectBoundingBox. Deze beïnvloeden de 0,0-coördinaten en de eenheidswaarden voor de filterprimitieven op dezelfde manier als voor filterUnits. |
| Kleur ruimte | De standaardkleurruimte voor SVG-filters is linearRGB. Het optionele attribuut color-interpolation-filters kan worden ingesteld op sRGB om de sRGB te veranderen in de meer conventionele sRGB-ruimte. |
Opmerkingen
De meeste filterattributen zijn animeerbaar via het <animate> animate <animate> -element, hoewel u de "fakeSMIL" -bibliotheek op IE moet gebruiken om dezelfde resultaten te bereiken. SMIL-animatie (het <animate> -element) wordt afgeschaft ten gunste van de nieuwe specificatie voor webanimaties - die vanaf medio 2016 zeer beperkte ondersteuning biedt.
Onderliggende elementen van het filterelement - filterprimitieven - hebben twee optionele attributen die de kleurruimte opgeven waarbinnen kleurinterpolatieberekeningen worden uitgevoerd: kleurinterpolatie en kleurinterpolatiefilters. De standaardwaarde voor de eerste is sRGB en de standaardwaarde voor de laatste is linearRGB. Manipulaties die de kleurruimte omkeren (via feColorMatrix of feComponentTransfer) kunnen leiden tot niet-intuïtieve resultaten - voor degenen die gewend zijn aan de CSS sRGB-kleurruimte. Een kleurinversie van een grijswaardenafbeelding in lineair RGB zal bijvoorbeeld resulteren in een uitgesproken verschuiving naar wittere tonen. Dit kan worden gecorrigeerd door de waarde van de primitieve in te stellen op sRGB. Deze attributen kunnen worden ingesteld op de afzonderlijke filterprimitieven of worden overgenomen van het filterelement zelf.
Als er geen andere invoer is opgegeven, maar er wel een is vereist, neemt de eerste filterprimitief in een filter een gerasterde (bitmap) versie van het verwijzende element als invoer. Daaropvolgende filterprimitieven die een invoer verwachten, zullen het resultaat van de onmiddellijk voorafgaande filterprimitief als invoer nemen.
In complexe filters kan het moeilijk worden om ingangen en uitgangen bij te houden (en te debuggen) als ze impliciet worden gelaten; en het is een goede gewoonte om voor elke primitief expliciet invoer en uitvoer te declareren.
SVG-filterprimitieven kunnen in de volksmond worden onderverdeeld in ingangen, transformaties, lichteffecten en combinaties.
ingangen:
feFlood: genereert een kleurveld
feTurbulence: genereert een breed scala aan geluidseffecten
feImage: genereert een afbeelding van een externe afbeeldingsreferentie, gegevens-URI of objectreferentie (objectverwijzingen worden niet ondersteund in Firefox vanaf medio december '12)
transformaties:
feColorMatrix: zet de invoerwaarden van een RBGA-pixel om in uitvoerwaarden
feComponentTransfer: past de kleurcurve van een individueel kleurkanaal aan
feConvolveMatrix: vervangt elke pixel door een nieuwe pixel berekend op basis van pixelwaarden in een gebied ten opzichte van de huidige pixel)
feGaussianBlur: vervangt de huidige pixel door een gewogen gemiddelde van pixels in een gebied rond de pixel
feDisplacementMap: verplaatst elke pixel van zijn huidige positie op basis van de R-, G- of B-waarden van een andere invoerafbeelding.
feMorphology: vervangt elke pixel door een nieuwe pixel berekend op basis van de maximale of minimale waarde van alle pixels in een rechthoekig gebied rond die pixel.
feOffset: verplaatst de invoer van zijn huidige positie
Lichteffecten:
feSpecularLighting: biedt een "glanzend" 2D- of pseudo-3D-verlichtingseffect
feDiffuseLighting: biedt een "mat" 2D- of pseudo-3D-verlichtingseffect
feDistantLight: biedt een verre lichtbron voor spiegelende of diffuse verlichting
feSpotLight: biedt een lichtbron met conische doorsnede voor spiegelende of diffuse verlichting
fePointLight: biedt een puntlichtbron voor spiegelende of diffuse verlichting
combinaties:
feMerge: maakt een eenvoudige overcomposiet van meerdere ingangen (inclusief eerdere filteringangen)
feBlend: combineert meerdere invoer met behulp van mengregels
feComposite: combineert meerdere invoer met behulp van vaste combinatieregels, rekening houdend met alfawaarden.
feTile: tegelsinvoer om een herhalend patroon te maken
Andere notities
Hoewel SVG een vector grafische technologie is, is het belangrijk om te benadrukken dat SVG-filters op pixelniveau bewerkingen uitvoeren op alle ingangen (inclusief SVG-vormen) en gerasterde (bitmap) uitgangen produceren met een gespecificeerd resolutieniveau. Het toepassen van een 10x-schaaltransformatie (bijvoorbeeld) op een gewone SVG-curve die is gefilterd met een normale schermresolutie, geeft korrelige randen, omdat de anti-aliasing van de originele afbeelding door het filter in pixels is omgezet en opgeschaald. (Het is onduidelijk of dit spec-compliant is of slechts een beperking van de huidige implementaties)
Vergeet niet dat SVG XML is wanneer u filters schrijft, dus alle tags moeten worden gesloten en veel eigenschappen en attributen moeten expliciet worden opgegeven, anders wordt het filter niet uitgevoerd.
Een filterelement wordt nooit rechtstreeks weergegeven. Er wordt alleen naar verwezen met de filtereigenschap op het element waarop het filter wordt toegepast. Merk op dat de weergave-eigenschap niet van toepassing is op het filterelement en dat elementen niet direct worden weergegeven, zelfs als de weergave-eigenschap is ingesteld op een andere waarde dan "geen". Omgekeerd zijn filterelementen beschikbaar om naar te verwijzen, zelfs wanneer de weergave-eigenschap op het filterelement of een van zijn voorouders is ingesteld op "geen".
Naar SVG-filters kan worden verwezen via een CSS-filter, hoewel vanaf medio 2016 alleen een subset van primitieven wordt ondersteund via dit mechanisme en dit mechanisme wordt niet ondersteund in Microsoft-browsers.
Vervagingsfilters: feGaussian Blur (basic)
<svg width="900px" height="400px" viewBox="0 0 900 400">
<defs>
<filter id="basicGaussian">
<feGaussianBlur stdDeviation="5"/>
</filter>
</defs>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="20px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet" />
<image filter="url(#basicGaussian)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="340px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet"/>
</svg>
( Bron afbeelding door Daderot op Wikimedia Commons)
Vervagingsfilters: feGaussianBlur (vervaging van x-as en y-as afzonderlijk ingesteld)
<svg width="900px" height="400px" viewBox="0 0 900 400">
<defs>
<filter id="xAxisGaussian">
<feGaussianBlur stdDeviation="5 0"/>
</filter>
</defs>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="20px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet" />
<image filter="url(#xAxisGaussian)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="340px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet"/>
</svg>
( Bron afbeelding door Daderot op Wikimedia Commons)
Vervagingsfilters: feGaussianBlur met harde randen en 100% dekking
<svg width="900px" height="400px" viewBox="900 400">
<defs>
<filter id="GaussianHardEdge" x="0%" y="0%" width="100%" height="100%">
<feGaussianBlur stdDeviation="5"/>
<feComponentTransfer>
<feFuncA type="table" tableValues="1 1"/>
</feComponentTransfer>
</filter>
</defs>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="20px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet" />
<image filter="url(#GaussianHardEdge)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="340px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet"/>
</svg>
( Bron afbeelding door Daderot op Wikimedia Commons)
Vervagingsfilters: Box Blur
<svg width="900px" height="400px" viewBox="900 400">
<defs>
<filter id="GaussianHardEdge" >
<feConvolveMatrix order="3" kernelMatrix=" 1 1 1
1 1 1
1 1 1"/>
</filter>
</defs>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="20px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet" />
<image filter="url(#GaussianHardEdge)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="340px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet"/>
</svg>
( Bron afbeelding door Daderot op Wikimedia Commons)
Vervagingsfilters: Bokeh vervagen (3 lagen, geknipt)
<svg width="900px" height="400px" viewBox="0 0 900 400">
<defs>
<filter id="BokehBlur" color-interpolation-filters="sRGB">
<feGaussianBlur stdDeviation="2" result="blurSource"/>
<feColorMatrix type="luminanceToAlpha"/>
<feComponentTransfer result="brightness-mask" >
<feFuncA type="discrete" tableValues="0 0 0 1 1"/>
</feComponentTransfer>
<!--bokeh Layer 1 -->
<feTurbulence type="fractalNoise" seed="1" baseFrequency=".67" numOctaves="3"/>
<feColorMatrix type="luminanceToAlpha"/>
<feComponentTransfer>
<feFuncA type="discrete" tableValues="0 0 0 1"/>
</feComponentTransfer>
<feComposite operator="in" in="brightness-mask"/>
<feComposite operator="in" in="blurSource"/>
<feMorphology operator="dilate" radius="5"/>
<feGaussianBlur stdDeviation="8"/>
<feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0
0 0 0 9 0" />
<feComponentTransfer result="bokeh1">
<feFuncA type="linear" slope=".5" />
</feComponentTransfer>
<!--bokeh Layer 2 -->
<feTurbulence type="fractalNoise" seed="49" baseFrequency=".67" numOctaves="3"/>
<feColorMatrix type="luminanceToAlpha"/>
<feComponentTransfer>
<feFuncA type="discrete" tableValues="0 0 0 1"/>
</feComponentTransfer>
<feComposite operator="in" in="brightness-mask"/>
<feComposite operator="in" in="blurSource"/>
<feMorphology operator="dilate" radius="10"/>
<feGaussianBlur stdDeviation="12"/>
<feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0
0 0 0 15 0" />
<feComponentTransfer result="bokeh2">
<feFuncA type="linear" slope=".3" />
</feComponentTransfer>
<!--bokeh Layer 3 -->
<feTurbulence type="fractalNoise" seed="44" baseFrequency=".67" numOctaves="3"/>
<feColorMatrix type="luminanceToAlpha"/>
<feComponentTransfer>
<feFuncA type="discrete" tableValues="0 0 0 1"/>
</feComponentTransfer>
<feComposite operator="in" in="brightness-mask"/>
<feComposite operator="in" in="blurSource"/>
<feMorphology operator="dilate" radius="10"/>
<feGaussianBlur stdDeviation="18"/>
<feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0
0 0 0 15 0" />
<feComponentTransfer result="bokeh3">
<feFuncA type="linear" slope=".2" />
</feComponentTransfer>
<!--Merge -->
<feBlend mode="multiply" in="bokeh3" in2="bokeh2"/>
<feBlend mode="lighten" in2="bokeh1"/>
<feMorphology operator="erode" radius="0" result="bokeh"/>
<feGaussianBlur stdDeviation="9" in="SourceGraphic"/>
<feComposite operator="over" in="bokeh"/>
<feComposite operator="in" in2="SourceGraphic"/>
</filter>
</defs>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="20px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet" />
<image filter="url(#BokehBlur)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="340px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet"/>
</svg>
( Bron afbeelding door Daderot op Wikimedia Commons)
Schaduwfilters: Basic Dropshadow
<svg width="800px" height="600px">
<defs>
<filter id="drop-shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="4"/>
<feOffset dx="5" dy="5" result="offsetblur"/>
<feFlood flood-color="red"/>
<feComposite in2="offsetblur" operator="in"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<text filter="url(#drop-shadow)" x="30" y="100" font-size="80">SVG Filters</text>
</svg>
Schaduwfilters: Inner Glow
<svg width="800px" height="600px">
<defs>
<filter id="inner-glow">
<feFlood flood-color="red"/>
<feComposite in2="SourceAlpha" operator="out"/>
<feGaussianBlur stdDeviation="2" result="blur"/>
<feComposite operator="atop" in2="SourceGraphic"/>
</filter>
</defs>
<text filter="url(#inner-glow)" x="30" y="100" font-size="80" font-family="Sans-Serif" font-weight="bold">SVG Filters</text>
</svg>
Schaduwfilters: complexe slagschaduw (voorgevormd, luidruchtig, gevormd)
<svg width="800px" height="600px">
<defs>
<filter id="complex-shadow" color-interpolation-filters="sRGB" x="-50%" y="-50%" height="200%" width="200%">
<!-- Take source alpha, offset it by angle/distance and blur it by size -->
<feOffset id="offset" in="SourceAlpha" dx="11" dy="6" result="SA-offset"/>
<feGaussianBlur id="blur" in="SA-offset" stdDeviation="4" result="SA-o-blur"/>
<!-- Apply a contour by using a color curve transform on the alpha and clipping the result to the input -->
<feComponentTransfer in="SA-o-blur" result="SA-o-b-contIN">
<feFuncA id="contour" type="table" tableValues="0 1 .3 .1 0.05 .1 .3 1 "/>
</feComponentTransfer>
<feComposite operator="in" in="SA-o-blur" in2="SA-o-b-contIN" result="SA-o-b-cont"/>
<!-- Adjust the spread by multiplying alpha by a constant factor --> <feComponentTransfer in="SA-o-b-cont" result="SA-o-b-c-sprd">
<feFuncA id="spread-ctrl" type="linear" slope="2.8"/>
</feComponentTransfer>
<!-- Adjust color and opacity by adding fixed offsets and an opacity multiplier -->
<feColorMatrix id="recolor" in="SA-o-b-c-sprd" type="matrix" values="0 0 0 0 0.945 0 0 0 0 0.137 0 0 0 0 0.137 0 0 0 0.49 0" result="SA-o-b-c-s-recolor"/>
<!-- Generate a grainy noise input with baseFrequency between approx .5 to 2.0. And add the noise with k1 and k2 multipliers that sum to 1 -->
<feTurbulence result="fNoise" type="fractalNoise" numOctaves="6" baseFrequency="1.98"/>
<feColorMatrix in="fNoise" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 7 -3" result="clipNoise"/>
<feComposite id="noisemix" operator="arithmetic" in="SA-o-b-c-s-recolor" in2="clipNoise" k1="0.67" k2="0.33" result="SA-o-b-c-s-r-mix"/>
<!-- Merge the shadow with the original -->
<feMerge>
<feMergeNode in="SA-o-b-c-s-r-mix"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<text filter="url(#complex-shadow)" x="30" y="100" font-size="80" font-family="Sans-Serif" font-weight="bold">SVG Filters</text>
</svg>
Kleurmanipulatiefilters: standaard grijswaarden
<svg width="800px" height="600px">
<defs>
<filter id="greyscale">
<feColorMatrix type="matrix"
values="0.2126 0.7152 0.0722 0 0
0.2126 0.7152 0.0722 0 0
0.2126 0.7152 0.0722 0 0
0 0 0 1 0"/>
</filter>
</defs>
<image
xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="20px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet" />
<image filter="url(#greyscale)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="340px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet"/>
</svg>
( Bron afbeelding door Daderot op Wikimedia Commons)
Kleurmanipulatiefilters: grijswaarden (alleen groen kanaal)
<svg width="800px" height="600px">
<defs>
<filter id="greyscale">
<feColorMatrix type="matrix"
values="0 1 0 0 0
0 1 0 0 0
0 1 0 0 0
0 0 0 1 0"/>
</filter>
</defs>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="20px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet" />
<image filter="url(#greyscale)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="340px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet"/>
</svg>
( Bron afbeelding door Daderot op Wikimedia Commons)
Kleurmanipulatiefilters: monotoon
<svg width="800px" height="600px">
<defs>
<filter id="greyscale">
<feColorMatrix type="matrix"
values=".2 .2 .2 0 0
.6 .6 .6 0 0
.2 .2 .2 0 0
0 0 0 1 0"/>
</filter>
</defs>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="20px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet" />
<image filter="url(#greyscale)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="340px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet"/>
</svg>
( Bron afbeelding door Daderot op Wikimedia Commons)
Vervagingsfilters: Focus vervagen (Gaussiaans)
<svg width="800px" height="600px">
<defs>
<filter id="focus-blur" >
<feDiffuseLighting result = "diffOut" diffuseConstant = "1" lighting-color="white">
<feSpotLight id="spotlight" x = "500" y = "100" z = "150" pointsAtX = "500" pointsAtY = "100" pointsAtZ = "0" specularExponent ="12" limitingConeAngle="70"/>
</feDiffuseLighting>
<feColorMatrix in="diffOut" result="alphaMap" type="luminanceToAlpha"/>
<feComponentTransfer in="alphaMap" result="invertlight">
<feFuncA type="table" tableValues="1 0 0"/>
</feComponentTransfer>
<feGaussianBlur in="invertlight" result="featherspot" stdDeviation="5"/>
<feComposite operator="xor" result="infocus" in2="SourceGraphic" in="featherspot"/>
<feGaussianBlur in="SourceGraphic" result="outfocus" stdDeviation="2"/>
<feComposite operator="over" in="infocus" in2="outfocus"/>
<feComposite operator="in" in2="SourceGraphic"/>
</filter>
</defs>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="20px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet" />
<image filter="url(#focus-blur)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="340px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet"/>
</svg>
( Bron afbeelding door Daderot op Wikimedia Commons)
Kleurmanipulatiefilters: Posteriseren
<svg width="800px" height="600px" >
<defs>
<filter id="posterize" color-interpolation-filters="sRGB">
<feComponentTransfer>
<feFuncR type="discrete" tableValues="0 0.25 0.75 1.0"/>
<feFuncG type="discrete" tableValues="0 0.25 0.75 1.0"/>
<feFuncB type="discrete" tableValues="0 0.25 0.75 1.0"/>
</feComponentTransfer>
</filter>
</defs>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/4/42/Andy_Warhol_1975.jpg" x="20px" y="20px" width="300px" height="600px" preserveAspectRatio="xMinYMin meet" />
<image filter="url(#posterize)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/4/42/Andy_Warhol_1975.jpg" x="340px" y="20px" width="300px" height="600px" preserveAspectRatio="xMinYMin meet"/>
</svg>
Vervagingsfilters: markeer Vervaging
Dit filter selecteert alleen de gebieden met hoge luminantie van een bronafbeelding, vervaagt de inhoud en stelt de vage inhoud bovenop het origineel samen.
<svg width="800px" height="600px">
<defs>
<filter id="highlightblur" color-interpolation-filters="sRGB">
<feColorMatrix type="luminanceToAlpha" in="SourceGraphic" result="lumMap"/>
<feComponentTransfer in="lumMap" result="highlightMask">
<feFuncA type="discrete" tableValues="0 0 0 0 0 0 0 1"/>
</feComponentTransfer>
<feComposite operator="in" in="SourceGraphic" in2="highlightMask" result="highlights"/>
<feGaussianBlur in="highlights" stdDeviation="3" result="highBlur"/>
<feComposite operator="over" in="highBlur" in2="SourceGraphic" result="final"/>
</filter>
</defs>
<image filter="url(#highlightblur)" x="0" y="-40" width="780" height="600" preserveAspectRatio="true" xlink:href="http://i554.photobucket.com/albums/jj424/allbowerpower/Christmas%202009/ChristmasTablesetting016b.jpg"
/>
</svg>