SVG
Filter
Suche…
Syntax
-
<filter id="filter-id":<filter id="filter-id"> ... Liste der untergeordneten Primitiven ...</filter> - Filter über SVG-Attribut anwenden:
<elementname filter="url(#filter-id)" ... /> - Filter über CSS-Eigenschaft anwenden: (-prefix- ) filter: url ("# filter-id");
Parameter
| Elementattribute | Einzelheiten |
|---|---|
| Filterbereich | Das Filterelement kann optional die Position, Abmessungen, Auflösung und Einheiten für die Ausgabe eines Filtereffekts definieren. Die Position und Abmessungen eines Filters können mit den folgenden Parametern angegeben werden: x, y, Breite, Höhe. Die Standardwerte sind nicht intuitiv und lauten: x: -10% y: -10% Breite: 120% Höhe: 120% |
| Filterauflösung | Das filterRes Attribut ist ein optionales Attribut in SVG 1.1, mit dem die Auflösung angegeben werden kann, mit der der Filter verarbeitet wird. Dieses Attribut wurde ungleichmäßig unterstützt und ist in aktuellen Browsern nun veraltet. |
| Filtereinheiten | Standardmäßig werden die Einheiten und das Koordinatensystem für den Filtereffektbereich (x, y, Breite, Höhe) eines Filterelements relativ zum Begrenzungsrahmen des Elements festgelegt, das auf den Filter verweist. In SVG-Begriffen heißt das "objectBoundingBox". Wenn wir x = "50%" schreiben, bedeutet dies "die x-Anfangsposition des Filterbereichs auf der linken Seite des Begrenzungsrahmens des referenzierenden Elements + 50% der Breite des Elements festlegen". Sie können die Einheiten und Koordinaten jedoch auch explizit angeben, indem Sie die filterUnits-Eigenschaft festlegen. Die zwei Alternativen sind "objectBoundingBox" (der Standard, den wir gerade beschrieben haben) oder "userSpaceOnUse". userSpaceOnUse setzt die Filtereinheiten und das Koordinatensystem auf die Zeichenfläche des referenzierenden Elements oder in SVG-Begriffen die "userSpaceOnUse". |
| Primitive Einheiten | Zusätzlich zum Einheitensystem für den Filter selbst können Sie auch das Einheitensystem angeben, das die untergeordneten Filterprimitive des Filters über das Attribut primitiveUnits verwenden. Wiederum können Sie zwischen userSpaceOnUse und objectBoundingBox wählen. Diese beeinflussen die 0,0-Koordinaten und die Einheitswerte für die Filterprimitive auf dieselbe Weise wie für filterUnits. |
| Farbraum | Der Standardfarbraum für SVG-Filter ist linearRGB. Das optionale Attribut für color-interpolation-filters kann auf sRGB , um den Farbraum in den herkömmlicheren sRGB-Bereich zu ändern. |
Bemerkungen
Die meisten Filterattribute können über das Element <animate> Sie müssen jedoch die Bibliothek "fakeSMIL" im IE verwenden, um dieselben Ergebnisse zu erzielen. Die SMIL-Animation (das <animate> -Element) wird zugunsten der neuen Web-Animations-Spezifikation nicht mehr empfohlen. Diese Unterstützung wird ab Mitte 2016 nur eingeschränkt unterstützt.
Untergeordnete Elemente des Filterelements - Filterprimitive - verfügen über zwei optionale Attribute, die den Farbraum angeben, in dem Farbinterpolationsberechnungen ausgeführt werden: Farbinterpolation und Farbinterpolationsfilter. Die Voreinstellung für erstere ist sRGB und die Standardeinstellung für letztere ist linearRGB. Manipulationen, die den Farbraum invertieren (durch feColorMatrix oder feComponentTransfer), können zu nicht intuitiven Ergebnissen führen - für diejenigen, die im CSS-sRGB-Farbraum verwendet werden. Beispielsweise führt eine Farbumkehrung eines Graustufenbildes in linearem RGB zu einer deutlichen Verschiebung zu weißeren Tönen. Dies kann korrigiert werden, indem Sie den Wert des Grundelements auf sRGB setzen. Diese Attribute können für die einzelnen Filtergrundelemente festgelegt oder vom Filterelement selbst übernommen werden.
Wenn keine andere Eingabe angegeben wird, eine aber erforderlich ist, verwendet das erste Filtergrundelement in einem Filter eine gerasterte (bitmapierte) Version des referenzierenden Elements als Eingabe. Nachfolgende Filtergrundelemente, die eine Eingabe erwarten, nehmen das Ergebnis des unmittelbar vorhergehenden Filtergrundelements als Eingabe auf.
Bei komplexen Filtern kann es schwierig werden, die Ein- und Ausgänge zu verfolgen (und zu debuggen), wenn sie implizit bleiben. Es ist empfehlenswert, die Ein- und Ausgänge für jedes Grundelement explizit zu deklarieren.
SVG-Filterprimitive können umgangssprachlich in Eingaben, Transformationen, Lichteffekte und Kombinationen unterteilt werden.
Eingaben:
feFlood: Erzeugt ein Farbfeld
feTurbulenz: erzeugt eine Vielzahl von Geräuscheffekten
feImage: Erzeugt ein Bild aus einer externen Bildreferenz, Daten-URI oder Objektreferenz (Objektreferenzen werden ab Mitte Dezember '12 nicht in Firefox unterstützt)
Transformationen:
feColorMatrix: wandelt die Eingabewerte eines RBGA-Pixels in Ausgabewerte um
feComponentTransfer: passt die Farbkurve eines einzelnen Farbkanals an
feConvolveMatrix: Ersetzt jedes Pixel durch ein neues Pixel, das aus Pixelwerten in einem Bereich relativ zum aktuellen Pixel berechnet wird.
feGaussianBlur: Ersetzt das aktuelle Pixel durch einen gewichteten Durchschnitt der Pixel in einem Bereich um das Pixel
feDisplacementMap: Verschiebt jedes Pixel von seiner aktuellen Position basierend auf den R-, G- oder B-Werten einer anderen Eingabegrafik.
feMorphology: Ersetzt jedes Pixel durch ein neues Pixel, das aus dem Maximal- oder Minimalwert aller Pixel in einem rechteckigen Bereich um dieses Pixel berechnet wird.
feOffset: verschiebt die Eingabe von ihrer aktuellen Position
Lichteffekte:
feSpecularLighting: Bietet einen "glänzenden" 2D- oder Pseudo-3D-Beleuchtungseffekt
feDiffuseLighting: Bietet einen "matten" 2D- oder Pseudo-3D-Beleuchtungseffekt
feDistantLight: Bietet eine entfernte Lichtquelle für spiegelnde oder diffuse Beleuchtung
feSpotLight: bietet eine konische Lichtquelle für spekulare oder diffuse Beleuchtung
fePointLight: Bietet eine Punktlichtquelle für spiegelnde oder diffuse Beleuchtung
Kombinationen:
feMerge: erstellt ein einfaches over-Composite aus mehreren Eingängen (einschließlich früherer Filtereingaben)
feBlend: Mischt mehrere Eingaben mit Mischregeln
feComposite: Kombiniert mehrere Eingaben mithilfe von Satzkombinationsregeln unter Berücksichtigung der Alpha-Werte.
feTile: Kachelt die Eingabe, um ein sich wiederholendes Muster zu erstellen
Weitere Hinweise
Obwohl SVG eine Vektor - Grafik - Technologie ist, ist es wichtig , dass SVG Filters führen Pixelebene Operationen an allen Eingängen (einschließlich Formen SVG) und produzieren gerastert (Bitmap-) Ausgänge auf einem bestimmten Niveau an Auflösung zu betonen. Die Anwendung einer 10x-Skalentransformation (z. B.) auf eine normale SVG-Kurve, die mit normaler Bildschirmauflösung gefiltert wurde, führt zu pixelierten Kanten, da das Anti-Aliasing der Originalgrafik durch den Filter in Pixel konvertiert und vergrößert wurde. (Es ist unklar, ob dies den Spezifikationen entspricht oder nur eine Einschränkung der aktuellen Implementierungen ist.)
Denken Sie daran, dass SVG beim Schreiben von Filtern XML ist. Daher müssen alle Tags geschlossen werden, und viele Eigenschaften und Attribute müssen explizit angegeben werden. Andernfalls wird der Filter nicht ausgeführt.
Ein Filterelement wird niemals direkt gerendert. Es wird nur über die filter -Eigenschaft des Elements, auf das der Filter angewendet wird, verwiesen. Beachten Sie, dass die Anzeigeeigenschaft nicht für das Filterelement gilt und Elemente nicht direkt gerendert werden, auch wenn die Anzeigeeigenschaft auf einen anderen Wert als "none" festgelegt ist. Umgekehrt sind Filterelemente für die Referenzierung verfügbar, selbst wenn die Anzeigeeigenschaft des Filterelements oder eines seiner Vorfahren auf "keine" gesetzt ist.
SVG-Filter können über einen CSS-Filter referenziert werden, obwohl ab Mitte 2016 nur eine Teilmenge von Grundelementen über diesen Mechanismus unterstützt wird. Dieser Mechanismus wird in Microsoft-Browsern nicht unterstützt.
Unschärfefilter: feGaußsche Unschärfe
<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>
( Quelle Bild von Daderot bei Wikimedia Commons)
Unschärfefilter: feGaussianBlur (x-Achse und y-Achse werden separat eingestellt
<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>
( Quelle Bild von Daderot bei Wikimedia Commons)
Unschärfefilter: feGaussianBlur mit harten Kanten und 100% Deckkraft
<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>
( Quelle Bild von Daderot bei Wikimedia Commons)
Unschärfefilter: Box-Unschärfe
<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>
( Quelle Bild von Daderot bei Wikimedia Commons)
Unschärfefilter: Bokeh-Unschärfe (3 Schichten, abgeschnitten)
<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>
( Quelle Bild von Daderot bei Wikimedia Commons)
Schattenfilter: 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>
Schattenfilter: 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>
Schattenfilter: Komplexer Schlagschatten (konturiert, laut, geformt)
<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>
Farbmanipulationsfilter: Grundlegende Graustufen
<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>
( Quelle Bild von Daderot bei Wikimedia Commons)
Farbmanipulationsfilter: Graustufen (nur grüner Kanal)
<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>
( Quelle Bild von Daderot bei Wikimedia Commons)
Farbmanipulationsfilter: Monoton
<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>
( Quelle Bild von Daderot bei Wikimedia Commons)
Unschärfefilter: Fokusunschärfe (Gaussian)
<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>
( Quelle Bild von Daderot bei Wikimedia Commons)
Farbmanipulationsfilter: Posterisieren
<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>
Unschärfefilter: Markieren Sie Unschärfe
Dieser Filter wählt nur die Bereiche mit hoher Luminanz einer Quellgrafik aus, verwischt den Inhalt und setzt den unscharfen Inhalt über das Original.
<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>