Benutzer:Rolf b/Filter in SVG

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
Filter-Icon.svg

Mit Grafikfiltern kann man die Darstellung eines SVG- oder HTML-Elements verändern, beispielsweise durch Unschärfe, Veränderung der Farbintensität, Verzerrungen oder Beleuchtungseffekte.

Typischerweise werden Elemente, einschließlich ihrer Kind-Elemente, als RGB-Bild in einen Puffer gezeichnet und dieser Puffer dann in die Darstellung des übergeordneten Elements integriert (Compositing). Grafikfilter dienen dazu, diesen Puffer vor dem Compositing noch einmal zu modifizieren. Welche Pixelauflösung dieser Puffer hat, hängt vom verwendeten Gerät ab. In SVG 1.1 konnte die Auflösung noch mit der filterRes-Eigenschaft beeinflusst werden, mittlerweile ist sie missbilligt und wird in der [ Filter Effects-Spezifikation] nicht mehr erwähnt. Dort steht nur noch

To provide high quality rendering, all filter primitives should operate in a device dependent coordinate space, the operating coordinate space, taking device pixel density, user space transformations and zooming into account.

Ursprünglich wurden Filter für die Verwendung in SVG entwickelt. Da aber HTML Elemente ebenfalls über RGB-Puffer gezeichnet werden, lag der Gedanke nahe, die Filterspezifikation aus SVG herauszulösen und eine neue, gemeinsame Spezifikation zu erstellen. In einem SVG-Element oder -Dokument erstellte Filter können so mittels einer CSS-Eigenschaft auch auf HTML-Elemente angewendet werden.

Quellen:


  • 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

Wenn die vordefinierten Filter nicht ausreichen, gibt es die Möglichkeit, eigene Filter aus einem Satz von vordefinierten Filtereffekten (Ur-Filter oder Filter-Primitive) zusammenzusetzen. Dies geschieht innerhalb eines SVG-<defs>-Elements, entweder in einem im HTML integrierten <svg>-Element oder in einem eigenen SVG-Dokument.

Ein Filtereffekt bekommt ein oder auch mehrere RGB-Bilder als Eingabe und erzeugt ein neues RGB-Bild als Ergebnis. Dieses Ergebnisbild kann wiederum als Eingabe für andere Filtereffekte genutzt werden. Das Ergebnisbild des letzten Filtereffekts ist dann das Ergebnis des gesamten Filters.

Einen einfachen Unschärfefilter kann man wie folgt definieren:

Unschärfefilter als filter-Element 
<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="unscharf">
      <feGaussianBlur stdDeviation="2.2" />
    </filter>
  </defs>

  <rect x="50" y="50" width="200" height="100" 
        fill="red" stroke="black" stroke-width="3"
        filter="url(#unscharf)" />
</svg>

Das <filter>-Element im <defs>-Abschnitt hat eine id unscharf bekommen. Mit dieser ID kann der Filter auf das <rect>-Element mittels filter="url(#unscharf)" angewendet werden.

Die Kindelemente des <filter>-Elements sind die Filtereffekte. Alle Filtereffekte haben einen Tagnamen, der mit fe beginnt – aber Vorsicht, nicht alles, was mit fe beginnt, ist auch ein Filtereffekt.

Unser Beispiel verwendet den Filtereffekt feGaussianBlur, das ist ein Unschärfefilter, der auf der von Carl Friedrich Gauß entwickelten Normalverteilungskurve („Glockenkurve“) basiert.[1] Diese Kurve ist eigentlich ein Werkzeug der Statistik, aber wegen ihrer Form eignet sie sich gut, um die Erzeugung von Unschärfe mathematisch zu beschreiben. Der Statistikbegriff „Standardabweichung“ beschreibt die Breite der Glocke, und deshalb heißt das Filtereffekt-Attribut, das die Stärke der Unschärfe angibt, stdDeviation. Brauchbare Werte liegen bei 2 bis 3 (sofern primitiveUnits auf dem Standardwert userSpaceOnUse steht, dazu später mehr).

Maßeinheiten und Filterregionen

Dieses Beispiel nutzt für einige SVG-Attribute die Defaultwerte des Browsers. Vollständig sähe der Filter so aus:

Filter mit ausgefüllten Defaults 
    <filter id="unscharf" x="-10%" y="-10%" width="120%" height="120%" 
                          filterUnits="objectBoundingBox" 
                          primitiveUnits="userSpaceOnUse">
      <feGaussianBlur stdDeviation="2.2" />
    </filter>

Ein Filter kann auf ein Element oder eine Gruppe von Elementen angewendet werden. Die Größe des RGB-Bildes, das dann als Eingabe für den Filter entsteht, wird durch das kleinstmögliche Rechteck bestimmt, das alle betroffenen Elemente einschließt. Dieses Rechteck nennt man Bounding-Box. Es ist aber oftmals so, dass das Filterergebnis größer als die Bounding-Box ist, d.h. für das Filterergebnis, das nachher vom Browser ausgegeben wird, braucht man etwas mehr Platz. Dieses Rechteck ist die Filterregion, und seine Größe und Lage in Bezug auf die Bounding-Box lässt sich mit den Attributen x, y, width und height festlegen. Der Normalfall ist, dass die Filterregion die BoundingBox in allen Richtungen um 10% ihrer Größe überragt. Eine stärkere Unschärfe oder Verschiebungseffekte benötigen möglicherweise eine größere Filterregion.

Die Maßeinheit für die Filterregion wird mit dem Attribut filterUnits festgelegt. Der Standardwert ist objectBoundingBox. Das bedeutet, dass der Wert 100% für Breite oder Höhe die vollständige Breite bzw. Höhe der Bounding-Box des Filters bezeichnet, ganz gleich, wie groß die Bounding-Box tatsächlich ist. Gibt man statt dessen userSpaceOnUse an, beziehen sich die angegebenen Werte auf das Koordinatensystem, das für das gefilterte Element verwendet wird. Zumeist ist das unpraktisch, weil der Filter dadurch auf eine bestimmte Größe der Bounding-Box festgelegt wird.

Bei den Filtereffekten ist es anders. Die meisten von ihnen unterstützten ebenfalls die Angabe von x, y, width und height, um einen Teilbereich der Filterregion festzulegen, in den sie ihr Ergebnis schreiben dürfen. Das Filterattribut primitiveUnits legt die Maßeinheit für diese Teilbereiche fest, und hier ist der Standardwert userSpaceOnUse. In den meisten Fällen ist die Angabe von Teilbereichen allerdings unnötig, standardmäßig wirkt jeder Filtereffekt auf die gesamte Filterregion.


Filter ermöglichen pixelorientierte Manipulationen an SVG-Vektorgrafiken und Elementen. Zum einen gibt es einige vordefinierte Filter, die als CSS-Funktionen notiert werden können. Zum anderen lassen sich mit SVG-Elementen auch eigene Filter aus einem oder beliebig vielen Filtereffekten zusammensetzen (man nennt diese Effekte auch Urfilter oder Primitive). Die Filtereffekte werden mit Hilfe von SVG-Elemente erzeugt, die man daran erkennt, dass ihr Name mit fe (Filtereffekt) beginnt.[2]

Einbindung

Um einen Filter zu verwenden, benötigt man in HTML die CSS-Eigenschaft filter. Für SVG-Elemente kann außerdem das Attribut filter genutzt werden. Beide Wege bieten die gleichen Möglichkeiten.

Wie die vordefinierten Filter verwendet werden, zeigt der im vorigen Abschnitt verlinkte Artikel.

Selbstdefinierte Filter werden in einem Definitionsabschnitt einer SVG-Grafik mit Hilfe eines filter-Elements erzeugt, in dem man die gewünschten Filtereffekte als Kindelemente einträgt. Jeder Filter bekommt eine ID und kann dann mit Hilfe der url()-Funktion im filter-Attribut oder der Eigenschaft verwendet werden.

Verwenden eines Filters über das Filter-Attribut 
<defs>
  <filter id="beispielfilter">
  ...
  </filter>
</defs>

<rect filter="url(#beispielfilter)" />
<text filter="drop-shadow(10px 10px 0 black)">Schlagschatten</text>

Dieses Beispiel verwendet das vorhin genannte filter-Attribut, um SVG-Elementen einen Filter zuzuordnen. Für das Rechteck nutzt es die url()-Funktion, um den Filter mit der id "beispielfilter" zuzuordnen. Das Textelement bekommt über die vordefinierte CSS-Filterfunktion drop-shadow() einen Schlagschatten.

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 und Filterkoordinatensystem

Außer id kennen das filter-Element und die Filtereffekt-Elemente eine Reihe von "Filter-Universalattributen":

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

Diese legen die Region fest (den Begrenzungsrahmen), innerhalb dessen der Filter wirkt. Der Koordinatenursprung ist dabei SVG-typisch die obere linke Ecke der Eingangsgrafik. Welche Koordinatenwerte zu verwenden sind, ist mit der Eigenschaft filterUnits einstellbar. Diese legt standardmäßig objectBoundingBox fest, Vorlage:DH man kann Prozentwerte benutzen, um Größenangaben zu machen. Der Bezugswert für diese Prozentwerte ist ein Rechteck, das gerade so groß ist, ess es alle SVG-Elementen, auf die der Filter wirkt, einschließt.

Solange nichts anderes angegeben wird, ist die Filterregion auf x="-10%", y="-10%", width="120%" und height="120%" festgelegt.

Die Filtereffekt-Elemente besitzen diese Attribute ebenfalls, um den Wirkungsbereich (die Teilregion) für den Effekt zu begrenzen. Das Koordinatensystem kann abweichen: es wird durch die Eigenschaft primitiveUnits ist das gleiche wie für den Filter, aber der Standardwert für Teilregionen ist 0% für x und y sowie 100% für width und height.

Für das filter-Element ist es standardmäßig so, dass der BegrenzuEinflussbereich eines Filters den Bereich, auf das er angewendet wird, um 10% seiner Größe in jeder Richtung, d.h. der Standardwert für x und y ist 10% und der Standardwert für width und height ist 120%. Im Normalfall genügt das, aber mache Filtereffekte ragen weiter über das Element hinaus, auf das man sie anwenden möchte, und man muss die Werte nach Bedarf anpassen, damit der Effekt vollständig sichtbar ist.

Andersherum kann es auch sein, dass der Wirkungsbereich zu groß ist. Hier sollte aber zuerst geprüft werden, ob nicht die Verwendung des feComposite-Filterelements mit der operation="in" und in2="SourceAlpha" die bessere Lösung ist.

Ob sie gebraucht werden, hängt vom jeweiligen Filter ab und davon, ob bzw. welche Angaben schon im filter-Tag gemacht wurden.

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:

  • SourceGraphic: (Standardwert) ganze Ausgangsgrafik
  • SourceAlpha: benutzt Alphakanal der Ausgangsgrafik
  • filterergebnis: Ein beliebiger Name, der bei einem anderen Filtereffekt im result-Attribut angegeben wurde. Auf diese Weise können Filter hintereinandergeschaltet werden.
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:[3]

  • 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. ↑ Wikipedia: Gaußscher Weichzeichner
  2. ↑ Wikibooks: SVG (von 2012, aber gut erklärt und gute Beispiele])
  3. ↑ vanseodesign: SVG Filter Primitives—Input and Output Steven Bradley


Generator

Beispiele:

Abgerufen am 7.01.2026
von "http://wiki.selfhtml.org/wiki/Benutzer:Rolf_b/Filter_in_SVG"