Filter in SVG

Aus SELFHTML-Wiki
(Weitergeleitet von SVG/Tutorials/Filter)
Wechseln zu: Navigation, Suche
Filter-Icon.svg

Mit Filtereffekten kann man das Rendering eines Elements verändern. Typischerweise werden Elemente, einschließlich ihrer Kinder in einen Puffer (z. B. ein Rasterbild) gezeichnet und dieser Puffer dann im übergeordneten Element angezeigt. Grafikfilter wenden einen Effekt vor der Compositing-Phase an, indem sie das Bild mit einem bestimmten mathematischen Algorithmus verbinden, der auf die gespeicherten RGB-Werte in der Grafik angewendet wird. Beispiele für solche Effekte sind Unschärfe, Änderung der Farbintensität und Verzerren des Bildes.

Ursprünglich wurden Filter für die Verwendung in SVG entwickelt. Da sie heute auf fast jede Darstellungsumgebung angewendet werden, einschließlich HTML und CSS, wurden sie neu im Filter Effects Module Level 1 zusammengefasst.[1][2]


  • Anwendung in CSS
    • CSS-Eigenschaft
    • CSS Filter-Funktionen
      • blur()
      • brightness()
      • contrast()
      • drop-shadow()
      • grayscale()
      • hue-rotate()
      • invert()
      • opacity()
      • sepia()
      • saturate()
    • CSS-Animationen
     
  • Filter in SVG
    • Das Filter-Element
      • Einbindung
      • Universalattribute
      • Eingangswert in, in2
      • Ergebniswert result
     
  • Licht und Schatten

    Realistische Beleuchtungs- und Schattierungseffekte mit SVG

     
  • Bildmanipulation

    Grafiken direkt im Browser kreativ verändern

     
  • Wasser und Wolken mit feTurbulence
     


Das Filter-Element

Filter ermöglichen pixelorientierte Manipulationen an SVG-Vektorgrafiken und Elementen. Ein Filter wird konstruiert aus einzelnen Urfiltern, auch Filtereffekte oder Primitive genannt. Man kann beliebig viele Filtertypen in einem Filter kombinieren. Filterelemente erkennt man am Präfix "fe", das für "Filtereffekt" steht.[3]

Einbindung

Filtereffekte werden im filter-Element innerhalb einer Definition angelegt, welcher die gewünschten Filtertypen umschließt. Über die ID des Filter kann man ihn mit (beliebig vielen) zu filternden Elementen verknüpfen.

Beispiel

Aufruf eines Filters über das Filter-Attribut

SVG-Elemente, deren Darstellung durch einen Filter verändert werden sollen, erhalten ein filter-Attribut.

Mögliche Werte sind:

  • url(): die Referenz auf den Filter im Definitionsbereich
  • eine vordefinierte CSS-Funktion, wie sie im vorherigem Kapitel beschrieben wurden.

Filter-Universalattribute

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

  • 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: Teste, ob der gewählte 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.


Eingangswert in

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.

Man kann allerdings mit den Attributen in und result ein anderes Verhalten festlegen. Für in sind folgende Attributwerte definiert:

  • <filter-primitive-reference>
  • SourceGraphic: (Standardwert) ganze Ausgangsgrafik
  • SourceAlpha: benutzt Alphakanal der Ausgangsgrafik
diverse Modi für das in-Attribut ansehen …
<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>
...

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.

Pseudo inputs

Beachte:

Die folgenden Werte sind in der Spezifikation (auch in SVG2) enhalten, werden von den Browsern jedoch nicht unterstützt:[4]

  • Firefox stellt die Werte BackgroundImage, BackgroundAlpha nicht dar
  • Safari nicht BackgroundImage, BackgroundAlpha, FillPaint, StrokePaint
  • Chrome, Edge und Opera stellt BackgroundImage, BackgroundAlpha, FillPaint, StrokePaint als sourceGraphic dar
  • BackgroundImage: verändert Bildausschnitt des SVG-Dokuments unter dem Filterbereich. Dafür muss 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 muss 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

Ergebniswert result

Mit dem result-Attribut kann man 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.

Urfilter

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



Siehe auch

  • SVG-Text mit Filter-Effekten
     
  • Muster in SVG/Texturen
     


Weblinks

  1. ↑ W3C: Filter Effects Module Level 1
  2. ↑ MDN: Filter effects
  3. ↑ Wikibooks: SVG (von 2012, aber gut erklärt und gute Beispiele])
  4. ↑ vanseodesign: SVG Filter Primitives—Input and Output Steven Bradley


Generator

Beispiele:

Abgerufen am 29.10.2025
von "http://wiki.selfhtml.org/wiki/Filter_in_SVG"