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.