Warnung
Da ich im Moment diese Seite leider nicht mehr aktiv pflegen und auf dem neuesten Stand halten kann, können manche Informationen bereits veraltet sein. Sollten Änderungen von euch bei mir eintreffen, bin ich jedoch gerne bereit diese hier einzupflegen. Auch Leute, die sich um die Seite bzw. deren Inhalt kümmern möchten, sind gerne gesehen.
 Inhaltsverzeichnis  Filter  Übersicht der Filtertypen

7.2Übersicht der Filtertypen

Im Rahmen dieser Dokumentation werden die 16 unterschiedlichen Filtertypen, die es in SVG gibt, vorerst nicht näher erläutert, sondern nur kurz mit Namen und der dazugehörigen Filtereigenschaft vorgestellt. Für weitere Informationen sei u.a. auf die SVG-Spezifikation verwiesen.

Als Beispiel soll mit einigen dieser Filtertypen ein Button hergestellt werden. Dazu wird ein Kreis als Ausgangsform erstellt und an den Filter übergeben, der den Kreis etwas beschneidet. Danach bearbeitet der Filtertyp <feGaussianBlur> den Alphakanal des Objekts. Das daraus resultierende Bild wird dem <feSpecularLighting>-Element übergeben, das für die passende Beleuchtung sorgt. Zuletzt fügen zwei <feComposite>-Tags alle Bilder zusammen.  Listing 7-1 und  Abbildung 7-1 zeigen den Button als Quelltext und als fertige Vektorgrafik.

 Anzeigebeispiel

<?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 version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="button" x="-10%" y="30%" width="120%" height="40%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur" />
      <feSpecularLighting in="blur" surfaceScale="6" specularConstant="0.4"
        specularExponent="4" result="spec" style="lighting-color:white">
        <fePointLight x="-6000" y="-8000" z="20000" />
      </feSpecularLighting>
      <feComposite in="spec" in2="SourceAlpha" operator="in" result="comp" />
      <feComposite in="comp" in2="SourceGraphic" operator="arithmetic"
        k1="0" k2="1" k3="1" k4="0" result="comp2" />
    </filter>
  </defs>
  <circle cx="60" cy="30" r="50" style="fill:blue;stroke:blue;stroke-width:3px"
    filter="url(#button)" />
</svg>
Listing 7-1: Der Button im Quelltext

Abbildung 7-1: Ein mit Hilfe von Filtern generierter Button
zum vorherigen Kapitel  Definition und Eigenschaften eines Filters
zum nächsten Kapitel  Transformationen
 Inhaltsverzeichnis  Filter  Übersicht der Filtertypen