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.

• <feBlend> - Überblendung zweier Objekte
• <feColorMatrix> - Farbänderung durch Matrixberechnung
• <feComponentTransfer> - Neuberechnung der einzelnen Farbkomponenten
• <feComposite> - Zusammenfügen zweier Objekte
• <feConvolveMatrix> - Unschärfe- und Prägefilter
• <feDiffuseLighting> - indirekte Beleuchtung durch diffuses Licht
• <feDisplacementMap> - Pixelverschiebung in Abhängigkeit eines Objekts
• <feFlood> - Füllen eines Objekts mit einer speziellen Farbe und Transparenz
• <feGaussianBlur> - erzeugt Schatten-, Licht- oder Unschärfeeffekte
• <feImage> - lädt ein Bild
• <feMerge> - Zusammenfügen beliebig vieler Objekte
• <feMorphology> - Verdicken und Verdünnen eines Objekts
• <feOffset> - Verschiebung eines Objekts
• <feSpecularLighting> - direkte Beleuchtung
• <feTile> - Kacheln eines Bildes innerhalb eines Objekts
• <feTurbulence> - Texturerzeugung mit Hilfe der Perlin-Noise-Funktion

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>