SVG/Filter

Der Titel dieses Artikels ist mehrdeutig. Für die gleichnamige CSS-Eigenschaft: CSS/Eigenschaften/Anzeige/filter.

Filter ermöglichen pixelorientierte Manipulationen an SVG-Vektorgrafiken und Elementen. Sie können beliebig viele Filtertypen in einem Filter kombinieren. Filterelemente erkennt man am Präfix "fe", das für "Filtereffekt" steht.

• 
• 
• 
• 
• 
• 

• feBlend: Überblendung zweier Objekte
• feColorMatrix: Farbänderung durch Matrixberechnung
• feComponentTransfer: Neuberechnung einzelner Farbkomponenten
• feComposite: Zusammenfügen zweier Objekte
• feConvolveMatrix: Unschärfe- und Prägefilter
• feDiffuseLighting: indirekte Beleuchtung
• feDisplacementMap: Pixelverschiebung in Abhängigkeit eines Objekts
• feFlood: Füllen eines Objekts mit einer speziellen Farbe und Transparenz
• feGaussianBlur: erzeugt Schatten-, Licht- oder Unschärfeeffekte
• feImage: lädt ein Bild
• feMerge: Zusammenfügen beliebig vieler Objekte
• feMorphology: Verdicken und Verdünnen
• feOffset: Verschiebung
• feSpecularLighting direkte Beleuchtung.
• feTile: Kacheln eines Bildes
• feTurbulence: Texturerzeugung

Das Filter-Element

Einbindung

Filtereffekte werden im filter-Element innerhalb einer Definition angelegt, welcher die gewünschten Filtertypen umschließt. Sie müssen dem Filter eine ID geben, mit der Sie ihn mit (beliebig vielen) zu filternden Elementen verknüpfen können. In diesen Elementen muss das Attribut filter gesetzt werden. Als Wert erhält es die Referenz auf den Filter.

Beispiel

<defs>
<filter id="bsp">
...
</filter>
</defs>

<rect filter="url(#bsp)"/>

Allgemeine Attribute für Filterelemente

Außer id kennt das filter-Element eine Reihe von "Filter-Universalattributen":

Koordinaten

• x: X-Koordinate
• y Y-Koordinate
• width: Breite
• height: Höhe

Diese legen einen Begrenzungsrahmen fest. Ob sie gebraucht werden, hängt vom jeweiligen Filter ab und davon, ob bzw. welche Angaben schon im filter-Tag gemacht wurden. Der Koordinatenursprung ist dabei bei den meisten primitiven Filtern die obere linke Ecke der Eingangsgrafik. width und height haben standardmäßig der Wert 100%, womit sie die Eingangsgrafik vollständig umschließen.

Empfehlung: Testen Sie, ob ihr gewählter Begrenzungsrahmen für die Filter ausreicht, da manche Filter das Bild vergrößern. Darüber hinaus ist anzuraten, den Begrenzungsrahmen immer um einige Prozent zu vergrößern, da manche Filter die Grafik etwas ausdehnen.

Eingangs- und Ergebniswert

Kommen in einer Filterdefinition mehrere Filtertypen zum Einsatz, ist üblicherweise deren Reihenfolge wichtig, da das Resultat des letzten Filtertyps dem nächsten als Eingabe dient. Der erste Filtertyp nutzt die Eingangsgrafik. Sie können allerdings mit den Attributen in und result ein anderes Verhalten festlegen. Für in sind folgende Attributwerte definiert:

• SourceGraphic: (Standardwert) ganze Ausgangsgrafik
• SourceAlpha: benutzt Alphakanal der Ausgangsgrafik
• BackgroundImage: verändert Bildausschnitt des SVG-Dokuments unter dem Filterbereich. Dafür mus das gefilterte Objekt Teil einer Gruppierung sein, die das Attribut enable-background="new" enthält
• BackgroundAlpha: verändert Alphakanal des Bildausschnitts unter dem Filterbereich. Dafür mus das gefilterte Objekt Teil einer Gruppierung sein, die das Attribut enable-background="new" enthält
• FillPaint: verändert den Wert der fill-Eigenschaft
• StrokePaint: verändert den Wert der stroke-Eigenschaft

Beispiel ansehen …

<svg  viewBox="0 0 880 600" >
<defs>
	<filter id="sGraphic">
		<feGaussianBlur stdDeviation="4" in="SourceGraphic"/>
	</filter>
	<filter id="sAlpha">
		<feGaussianBlur stdDeviation="4" in="SourceAlpha"/>
	</filter>
	<filter id="bgImage">
		<feGaussianBlur stdDeviation="4" in="BackgroundImage"/>
	</filter>
	<filter id="bgAlpha">
		<feGaussianBlur stdDeviation="4" in="BackgroundAlpha"/>
	</filter>
	<filter id="fPaint">
		<feGaussianBlur stdDeviation="4" in="FillPaint"/>
	</filter>
	<filter id="sPaint">
		<feGaussianBlur stdDeviation="4" in="StrokePaint"/>
	</filter>
</defs>
 
<g transform="translate(100,50)">
	<text y="-5">Kein Filter</text>
	<rect width="150" height="100" />
	<circle cx="50" cy="100" r="50" />
</g>
<g transform="translate(300,50)">
	<text y="-5">in=SourceGraphic</text>
	<rect width="150" height="100" />
	<circle cx="50" cy="100" r="50"  filter="url(#sGraphic)"/>
</g>
<g transform="translate(500,50)">
	<text y="-5">in=SourceAlpha</text>
	<rect width="150" height="100" />
	<circle cx="50" cy="100" r="50"  filter="url(#sAlpha)"/>
</g>
<g transform="translate(300,250)" enable-background="new">
	<text y="-5">in=BackgroundImage</text>
	<rect width="150" height="100" />
	<circle cx="50" cy="100" r="50"  filter="url(#bgImage)"/>
</g>
<g transform="translate(500,250)" enable-background="new">
	<text y="-5">in=BackgroundAlpha</text>
	<rect width="150" height="100" />
	<circle cx="50" cy="100" r="50"  filter="url(#bgAlpha)"/>
</g>
<g transform="translate(300,400)">
	<text y="-5">in=FillPaint</text>
	<rect width="150" height="100" />
	<circle cx="50" cy="100" r="50"  filter="url(#fPaint)"/>
</g>
<g transform="translate(500,400)">
	<text y="-5">in=StrokePaint</text>
	<rect width="150" height="100" />
	<circle cx="50" cy="100" r="50"  filter="url(#sPaint)"/>
</g>
</svg>

Das Beispiel zeigt ein Rechteck und davor einen Kreis. Durch die Festlegung fill-opacity:.5 im CSS haben beide einen halbtransparenten Hintergrund. Der Filter feGaussianBlur wird jeweils auf den Kreis angewandt, mit 6 verschiedenen in-Werten.

Beachten Sie:

Im Firefox 39 werden Filter mit den Werten bgImage und bgAlpha nicht dargestellt. Chrome und Opera stellen diese wie sourceGraphic dar.

ansehen …

Ergebniswert

Mit dem Attribut result können Sie auch einen Namen für das Ergebnis eines Filtertyps vergeben, und dann diesen Namen anstelle eines der obigen Attributwerte mit in in einem anderen Filtertyp als Eingangswert nutzen.

Beispiel ansehen …

<defs> <filter id="Filter"> <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="weichgezeichnet"/> <feSpecularLighting in="weichgezeichnet"/> surfaceScale="5" specularConstant="1" specularExponent="10" lighting-color="white" result="zwischenergebnis1"/>> <fePointLight x="-50" y="-100" z="200"/> </feSpecularLighting> <feComposite in="zwischenergebnis1"/> in2="SourceAlpha" operator="in" result=zwischenergebnis2"/> <feComposite in="SourceGraphic" in=zwischenergebnis2" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" in=beleuchtet"/> <!-- Weichzeichner --> <feGaussianBlur in="SourceAlpha" stdDeviation="3" result=weichgezeichnet1"/> <!-- Verschiebung --> <feOffset in=weichgezeichnet1" dx="3" dy="3" result="weichgezeichnetVerschoben"/> <!-- Zusammenfügen --> <feMerge> <feMergeNode in="weichgezeichnetVerschoben"/> <feMergeNode in="SourceGraphic"/> <feMergeNode in=beleuchtet"/> </feMerge> </filter> </defs>

Die Ergebniswerte result der einzelnen Filter werden als Eingangswerte in für neue Filter verwendet.

ansehen …

Der Namensraum von result ist auf das aktuelle Filterelement beschränkt. Wenn Sie mehrere Filterelemente in einem Dokument nutzen, können Sie die gleiche Angabe in result in verschiedenen Filterelementen nutzen.

Weblinks

• W3C: SVG/Filters

Generator

• jorgeatgu: Filter-Generator (der fertigen Code erzeugt, den man einfach kopieren und einfügen kann.)

Beispiele:

• developer.mozilla.org: Filter
• Paul Irish: on HTML5-video
• thenewcode: Boom, Wham, Pow! Comic Book FX Lettering with SVG Filters