Einführung in SVG-Filter

Derzeit bietet CSS eine Möglichkeit, Farbeffekte auf Bilder anzuwenden (z. B. Helligkeit, Sättigung, Kontrast usw.) mithilfe der filter-Eigenschaft. CSS-Filter sind jedoch begrenzt. Sie bieten eine feste Auswahl an Einzelzweck-Funktionen (blur(), brightness(), drop-shadow() usw.), die auf ein ganzes Element angewendet werden – hauptsächlich zur Farbmanipulation und Weichzeichnung. Um leistungsfähigere, zusammengesetzte Effekte zu erzielen, sind andere Funktionen erforderlich. Solche Funktionen stehen in SVG zur Verfügung.

Diese Seite führt ein, was SVG-Filter leisten, erklärt das <filter>-Element und seinen Filterbereich sowie die Verkettung von Filterprimitiven über den in/result-Mechanismus.

Was SVG-Filter leisten (und wann man sie einsetzt)

Ein SVG-Filter ist eine kleine Bildverarbeitungs-Pipeline. Statt eines einzelnen vorgefertigten Effekts beschreiben Sie eine Kette aus elementaren Operationen – sogenannte Filterprimitiven –, bei der die Ausgabe eines Schritts zur Eingabe des nächsten wird. Durch die Verkettung von Primitiven lassen sich Effekte erzeugen, die CSS allein nicht ausdrücken kann:

• Schlagschatten und Leuchten, die durch Verschieben, Weichzeichnen, Umfärben und erneutes Zusammensetzen der Ursprungsgrafik entstehen.
• Texturen und Rauschen, generiert mit <feTurbulence> (Perlin-Rauschen) für Wolken, Papier, Marmor usw.
• Displacement / Verzerrung mit <feDisplacementMap>, das Pixel mithilfe eines anderen Bildes als Höhenkarte verschiebt.
• Beleuchtungseffekte, die den Alphakanal als 3D-Bump-Map behandeln.

Wann SVG-Filter CSS-Filtern vorzuziehen sind: Nutzen Sie die CSS-filter-Eigenschaft, wenn Sie einen schnellen Einzeleffekt (Weichzeichnung, Helligkeitsanpassung, ein Schlagschatten) auf ein HTML- oder SVG-Element anwenden möchten. Greifen Sie auf SVG-Filter zurück, wenn Sie mehrere Operationen zu einem zusammengesetzten Effekt kombinieren, Texturen erzeugen oder Displacement anwenden möchten – also alles, was die Ausgabe einer Operation als Eingabe einer anderen erfordert.

Das <filter>-Element und sein Bereich

Sie definieren einen Filter einmalig innerhalb von <defs> und referenzieren ihn von einer Form aus mit dem Attribut filter="url(#id)" (oder der CSS-Eigenschaft filter). Das <filter>-Element selbst zeichnet nichts – es ist ein Container für die Primitiven, die die eigentliche Arbeit leisten.

Ein Filter hat einen Filterbereich: einen Begrenzungsrahmen, der festlegt, wo das gefilterte Ergebnis gerendert wird. Alles, was außerhalb dieses Bereichs gezeichnet wird, wird abgeschnitten. Der Bereich wird durch folgende Attribute am <filter>-Element gesteuert:

Dieser Bereich ist die häufigste Fehlerquelle. Effekte wie Weichzeichnung und Schlagschatten reichen über die ursprüngliche Form hinaus, und der standardmäßige 120-%-Bereich ist oft zu klein – der Schatten wird an den Rändern abgeschnitten. Wenn Ihr Effekt abgeschnitten aussieht, vergrößern Sie den Bereich, z. B. x="-50%" y="-50%" width="200%" height="200%".

Filterprimitiven

In SVG enthält jedes <filter>-Element eine Menge von Filterelementen als Kindelemente. Jede Filterprimitive führt eine grundlegende grafische Operation auf einer oder mehreren Eingaben aus, liefert jedoch nur ein Ergebnis. Die Eingabe wird im Attribut in angegeben. Das Ergebnis der Operation wird im Attribut result festgehalten. Das Ergebnis kann dann als Eingabe für weitere Operationen verwendet werden. Wenn das Attribut in weggelassen wird, verwendet die Primitive standardmäßig SourceGraphic für die erste Operation bzw. das Ergebnis der vorherigen Primitive bei verketteten Operationen. Alle Primitiven haben dasselbe Präfix: fe (kurz für „filter effect"). Sie werden je nach dem benannt, was ein Element ist oder tut. Die Primitive, die einen Gaußschen Weichzeichner auf die Quellgrafik anwendet, heißt z. B. feGaussianBlur.

Spezielle Eingabe-Schlüsselwörter

Neben der Benennung des result einer vorherigen Primitive kann das Attribut in auf folgende eingebaute Eingaben verweisen:

Hinweis: BackgroundImage, BackgroundAlpha, FillPaint und StrokePaint sind Teil der Spezifikation, werden aber heute von Browsern kaum oder gar nicht unterstützt. In der Praxis arbeiten Sie mit SourceGraphic, SourceAlpha und dem result anderer Primitiven.

Derzeit gibt es 17 Filterprimitiven, die in der SVG-Filter-Spezifikation definiert sind.

Filterelemente in SVG

Ein Einzel-Primitiv-Beispiel

Der einfachste Filter hat eine Primitive. Hier nimmt feGaussianBlur die SourceGraphic und weichzeichnet sie:

<svg width="200" height="200">
  <defs>
    <filter id="blur">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
    </filter>
  </defs>
  <rect x="10" y="10" width="180" height="180" fill="blue" filter="url(#blur)" />
</svg>

Primitiven verketten: ein Schlagschatten

Die eigentliche Stärke liegt in der Verkettung. Um einen Schlagschatten von Hand zu erstellen, nehmen wir die Silhouette des Elements, verschieben sie nach unten und rechts, weichzeichnen sie und legen dann die ursprüngliche Grafik wieder darüber. Verfolgen Sie die result/in-Attribute, um zu sehen, wie die Ausgabe jedes Schritts in den nächsten fließt:

<svg width="220" height="220">
  <defs>
    <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
      <!-- 1. Take the alpha (silhouette) of the source -->
      <feOffset in="SourceAlpha" dx="6" dy="6" result="offset" />
      <!-- 2. Blur that offset silhouette -->
      <feGaussianBlur in="offset" stdDeviation="4" result="blur" />
      <!-- 3. Stack the blurred shadow under the original graphic -->
      <feMerge>
        <feMergeNode in="blur" />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
  </defs>
  <rect x="20" y="20" width="160" height="160" rx="12"
        fill="#1e88e5" filter="url(#shadow)" />
</svg>

So fließen die Daten:

1. feOffset liest SourceAlpha (die Silhouette der Form) und verschiebt sie um dx/dy, und schreibt result="offset".
2. feGaussianBlur liest in="offset" und weichzeichnet es, und schreibt result="blur".
3. feMerge stapelt Ebenen von unten nach oben: zuerst den blur (den Schatten), dann die ungezeichnete SourceGraphic obenauf – so liegt die scharfe Form über ihrem weichen Schatten.

Beachten Sie den vergrößerten Filterbereich (width="140%" height="140%"), damit der verschobene, weichgezeichnete Schatten nicht abgeschnitten wird.

Für vorgefertigte Abkürzungen siehe die Primitive <feDropShadow> und das Kapitel SVG-Weichzeichnereffekte. Eine vollständige Attributliste für jede Primitive befindet sich in der SVG-Referenz.

Übung