SVG-Filter

Browser-Ansicht

Diese SVG Objektgrafik demonstriert die Möglichkeiten von Filtern.
Quelle: http://de.wikibooks.org/wiki/Datei:SVG_Buch01.svg

Die Original-Grafik wurde in einigen Punkten verändert, z.B.
• Die Regeln zur Formatierung wurden in einem → CSS <style>-Element zusammengefasst.
• Der Ursprung des Koordinaten-Systems wurde in den Mittelpunkt der Grafik verlegt. Danach kann man die gesamte Grafik einfach verschieben oder skalieren, hier z.B. durch Verkleinerung mit dem Attribut transform="scale(0.4)"

• Das Beispiel demonstriert nur einige der Effekte, die man durch Anwendung von Filtern erzielen kann:
Anzeige mit oder ohne Filter und grafische Tricks.

Ein anderes Beispiel: → Interaktive Konstruktion von Schatten mit SVG

SVG-Quelltext des Filter-Beispiels

◀  Diesen Text hat ihr Browser erhalten und daraus die Objektgrafik hergestellt.

• Das <desc>-Element enthält beschreibenden Text (Meta-Daten). Bei richtiger Anwendung kann man nach den darin enthaltenen Stichworten suchen.

• Ein → CSS <style>-Element enthält die Regeln zur Formatierung der Elemente.

• Im umfangreichen <defs>-Element werden die Regeln der verwendeten Filter festgelegt.
Jeder Filter hat einen oder mehrere Eingänge und einen Ausgang. Als Eingang wird entweder die Original-Grafik verwendet ( SourceGraphic, SourceAlpha, BackgroundImage, ... ) oder der Ausgang eines vorher angewendeten Filters. Wenn der Ausgang mit dem Attribut result benannt wird, kann man ihn als Eingang für weitere Filter verwenden.

• Zuletzt folgen die wenigen zu zeichnenden Objekte. Die <g>-Elemente (Gruppen) dienen dazu, Elemente zusammenzufassen und Methoden (Skalierung, Filter) auf die Elemente der Gruppe anzuwenden.
Die Ansicht der Ellipse wird durch raffinierte Anordnung von 4 einzelnen Ellipsen und durch die Wirkung der Filter erzeugt.

Links: W3Schools, W3C