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>

Weblinks

• W3C SVG-Seite Spezifikationen, Liste von Implementierungen
• W3C SVG primer: Filters W3C Primer (Entwurf)-Kapitel und Beispiele in Bezug auf Filter.