SVG-Filtereffekte

SVG-Filtereffekte sind Effekte, welche auf Skalierbare Vektorgrafiken (SVG)-Dateien angewandt werden. SVG ist ein offen zugängliches XML-Format für zweidimensionale Vektorgrafiken, wie vom World Wide Web Consortium (W3C) beschrieben. Ein Filtereffekt besteht aus einer Reihe von grafischen Operationen, welche auf eine gegebene Quell-Vektorgrafik angewandt werden und ein verändertes Bitmap-Ergebnis erzeugen.

Filtereffekte werden durch Filterelemente definiert. Um einen Filtereffekt auf ein Grafikelement oder ein Containerelement anzuwenden, wird die 'filter'-Eigenschaft desjenigen Elements gesetzt. Jedes 'filter'-Element enthält eine Reihe von Filter-Primitiven als dessen Kindelemente. Jede Filterprimitive vollführt eine einzige fundamentale Grafikoperation (bspw. ein Gaußscher Weichzeichner oder einen Lichteffekt) auf eine oder mehrere Eingabeelemente und erzeugt ein grafisches Ergebnis. Weil die meisten Filterprimitiven eine Art von Bildbearbeitung darstellen, ist in den meisten Fällen die Ausgabe der Filterprimitive ein einzelnes RGBA-Bitmapbild (allerdings wird es neu erstellt, wenn eine höhere Auflösung gefordert wird).

Die ursprüngliche Quelldatei oder das Ergebnis einer Filterprimitiven können als Eingabe für eine oder weitere Filterprimitiven dienen. Eine weitverbreitete Anwendung ist es, die Quellgrafik mehrfach zu verwenden. Beispielsweise könnte ein einfacher Filter eine Grafik durch zwei ersetzen, indem eine schwarze Kopie zur ursprünglichen Quellgrafik mit Versatz hinzugefügt wird, um einen Schlagschatten zu erzeugen. Tatsächlich gibt es nun zwei Grafikebenen, beide haben dieselben Quellgrafiken.

SVG-Filterprimitive

Die folgende Tabelle listet die Filterprimitiven, welche sowohl in SVG 1.0 als auch in SVG 1.1 zur Verfügung stehen. SVG Tiny unterstützt keine Filtereffekte, während SVG Basic nur die dort gezeigten Filterprimitiven unterstützt.

Name Element SVG Basic
Verschmelzung feBlend Ja
Farbmatrix feColorMatrix Nein
Component transfer feComponentTransfer Ja
Composite feComposite Ja
Faltungsmatrix feConvolveMatrix Nein
Diffuses Licht feDiffuseLighting Nein
Displacement map feDisplacementMap Nein
Überflutung feFlood Ja
Gaußscher Weichzeichner feGaussianBlur Ja
Bild feImage Ja
Zusammenfügen feMerge Ja
Morphologie feMorphology Nein
Versatz feOffset Ja
Specular lighting feSpecularLighting Nein
Kacheln feTile Ja
Verwirbelung feTurbulence Nein

Rahmen für die Anwendung eines Filters

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg"
 width="4in" height="3in">
  <defs>
    <filter id="AFilter">
      <!-- Hier gehört die Filterdefinition hin -->
    </filter>
  </defs>
  <text style="filter:url(#AFilter)">ein angewandter Filter</text>
</svg>
Quelle: https://de.wikipedia.org/wiki/SVG-Filtereffekte