Filter in SVG/Einbinden

20min

leicht

• Einstieg in CSS
• Einführung in Filter

Wir möchten in dieser Artikelreihe zunächst behandeln, wie man einen vorhandenen Filter verwendet. Das werden wir an Hand des Weichzeichner-Filters blur() und des Graustufenfilters grayscale() tun; eine Übersicht über die übrigen Filter und wie man eigene Filter mit SVG erstellt soll später behandelt werden.

Möglichkeiten der Einbindung

Filter sind ein Feature, das ursprünglich aus SVG stammt und später auch in CSS verfügbar gemacht wurde. Aus diesem Grund gibt es in SVG ein eigenes filter-Attribut. Das CSS-Gegenstück dazu ist die filter-Eigenschaft, die auf HTML- und SVG-Elemente angewendet werden kann. Inhaltlich sind beide Möglichkeiten identisch, Attribut und Eigenschaft können eine Filterliste als Wert bekommen oder das Schlüsselwort none, um explizit auszusagen, dass kein Filter verwendet werden soll. In CSS sind darüber hinaus die üblichen Vererbungs-Schlüsselwörter möglich.

Eine Filterliste besteht aus einer oder mehreren Filterangaben, die durch Leerstellen getrennt werden. Die einzelnen Angaben sehen aus wie CSS-Funktionen.

Beispiel

<style>

  .blurred {
    filter: blur(3px);
  }
  rect { fill: yellow; stroke: red; stroke-width: 5px; }

</style>

<rect x="170" y="10"  width="130" height="100" class="blurred" />
<rect x="170" y="110" width="130" height="100" filter="blur(3px)" />
</svg>

Das nebenstehende Bild zeigt das ungefilterte Rechteck, rechts die Ergebnisse des Beispiels und links unten den Vergleich mit einem selbst erstellten <feGaussianBlur>-Filter, der allerdings leicht abweicht. Das liegt daran, dass die vordefinierten Filter eine Umrandung anders behandeln, als es in selbstdefinierten Filtern möglich ist.

Der vollständige Quelltext befindet sich in Beispiel:SVG-Filter-Vergleich.svg

Mehrere Filter

Wenn ein Filter nicht genügt, wenn wir beispielsweise ein weichgezeichnes Schwarzweiß-Bild haben möchten, können auch mehrere Filter nacheinander angewendet werden:

Beispiel

<style>

  .blurred {
    filter: blur(3px) grayscale(1);
  }
  rect { fill: yellow; stroke: red; stroke-width: 5px; }

</style>

<rect x="170" y="10" width="130" height="100" class="blurred" />
<rect x="10" y="110" width="130" height="100" filter="grayscale(1) blur(3px)" />
</svg>

Die Reihenfolge, in der zwei Filter angewendet werden, ist nicht immer beliebig. Im Falle von blur() und grayscale() ist es gleichgültig, was zuerst geschieht.

Graustufenbildung in selbstdefinierten Filtern lässt sich über <feColorMatrix> erreichen, das Ergebnis ist aus den genannten Gründen wieder nicht ganz das gleiche.

Der vollständige Quelltext befindet sich in Beispiel:SVG-Filter-Vergleich2.svg