Einführung in SVG-Filter

Derzeit bietet CSS eine Möglichkeit, Farbeffekte auf Bilder anzuwenden (z. B. Helligkeit, Sättigung, Kontrast usw.) über die filter-Eigenschaft. CSS-Filter sind jedoch begrenzt. Die damit erstellten Effekte sind normalerweise auf Bilder anwendbar, beschränken sich aber auf Farbmanipulation und Unschärfe. Um leistungsstarke Effekte zu erzeugen, benötigen wir andere Funktionen. Solche Funktionen sind in SVG verfügbar.

SVG-Filter fügen SVG-Grafiken verschiedene Effekte hinzu.

Filterprimitiven

In SVG enthält jedes <filter>-Element eine Reihe von Filterelementen als Kindelemente. Jedes Filterprimitiv führt eine grundlegende grafische Operation auf einem oder mehreren Eingabewerten aus, gibt jedoch nur ein Ergebnis zurück. Die Eingabe wird in einem Attribut namens in angegeben. Das Ergebnis der Operation wird im result-Attribut festgelegt. Das Ergebnis kann anschließend als Eingabe für andere Operationen verwendet werden. Wenn das in-Attribut jedoch weggelassen wird, verwendet das Primitiv standardmäßig SourceGraphic für die erste Operation oder das Ergebnis des vorherigen Primitivs für verkettete Operationen. Alle Primitiven haben denselben Präfix: fe (Abkürzung für „Filtereffekt“). Sie werden je nach Funktion oder Zweck eines Elements benannt. Das Primitiv, das einen Gaußschen Weichzeichner-Effekt auf die Quellografik anwendet, heißt beispielsweise feGaussianBlur.

Neben der Verwendung des Ergebnisses anderer Primitiven als Eingabe kann ein Filterprimitiv auch andere Eingaben wie SourceGraphic (ein Element, auf das der gesamte Filter angewendet wird) und SourceAlpha (dasselbe wie SourceGraphic, jedoch enthält diese Grafik nur den Alphakanal des Elements) akzeptieren.

Derzeit sind 17 Filterprimitiven in der SVG-Filter-Spezifikation definiert.

Filterelemente in SVG

Element	Beschreibung
<feBlend>	Mischt zwei Objekte mit gängigen Mischmoden aus der Bildbearbeitungssoftware.
<feColorMatrix>	Wendet eine Matrixtransformation an.
<feComponentTransfer>	Führt eine komponentenweise Neuzuordnung von Daten durch.
<feComposite>	Kombiniert zwei Eingabebilder pixelweise im Bildraum.
<feConvolveMatrix>	Wendet einen Matrix-Konvolutionsfiltereffekt an.
<feDiffuseLighting>	Beleuchtet ein Bild unter Verwendung des Alphakanals als Bump-Map.
<feDisplacementMap>	Verwendet Pixelwerte aus der in2-Eingabe, um das in-Eingabebild zu verschieben.
<feFlood>	Erstellt ein Rechteck, das mit den Deckkraft- und Farbwerten aus den Eigenschaften flood-opacity und flood-color gefüllt wird.
<feGaussianBlur>	Wendet einen Gaußschen Weichzeichner auf das Eingabebild an.
<feImage>	Verweist auf eine externe Grafik, die geladen oder in ein RGBA-Raster gerendert wird, um das Ergebnis des Primitivs zu bilden.
<feMerge>	Mischt Eingabebilderbenen.
<feMorphology>	Führt eine „Verdünnung“ oder „Verdickung“ durch.
<feOffset>	Verschiebt das Eingabebild.
<feSpecularLighting>	Beleuchtet eine Quellografik unter Verwendung des Alphakanals als Bump-Map.
<feTile>	Füllt ein Zielrechteck mit einem sich wiederholenden Muster eines Eingabebildes.
<feTurbulence>	Erstellt ein Bild mit der Perlin-Turbulenzfunktion.
<feDropShadow>	Erstellt einen Schlagschatteneffekt.

Anwendungsbeispiel

<svg width="200" height="200">
  <defs>
    <filter id="blur">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
    </filter>
  </defs>
  <rect x="10" y="10" width="180" height="180" fill="blue" filter="url(#blur)" />
</svg>

Practice

Was ermöglicht der SVG-Filter in HTML?

SVG-Filter ermöglicht Änderungen an den Eigenschaften von Bildern und Texten.SVG-Filter wird zur Ausführung von Schleifen in HTML verwendet.SVG-Filter ermöglicht das Hinzufügen von Effekten wie Unschärfe, Helligkeit, Kontrast usw. zu einer SVG-Grafik.SVG-Filter wird zur Änderung von CSS-Attributen verwendet.