SVG- und CSS-Filter: Ein Vergleich

Veröffentlicht von Anja - 25. November 2019

SVG-Filter sind Filtereffekte, die - anders als es ihr Name vermuten lässt - nicht nur auf SVG-Dateien, sondern auf sämtliche Bild-Dateien und sogar auf einzelne HTML-Elemente und Texte innerhalb einer Webseite angewendet werden können. Sie bieten eine hohe Browserabdeckung, sind aber leider nicht besonders intuitiv zu handhaben. Anders dagegen die CSS-Filter: durch das filter-Attribut lassen

Und wie funktionieren sie?

Das Grundgerüst von SVG-Filtern ist eigentlich immer gleich:

<svg width="250px" height="250px">
  <defs>
    <filter id="filterId">
      <!-- ... -->
    </filter>
  </defs>
  <image xlink:href="lib/img/sonne.jpg" width="100%" height="100%" x="0" y="0" filter="url(#filter)"></image>
</svg>

Es wird die Größe des darzustellenden Bereichs definiert, dann folgen die Definitionen (<defs>) mit den sog. Filter-Primitiven. Anschließend wird das Bild, welches durch die Filter verändert werden soll, eingebunden und mit dem Filter verknüpft (filter="url(#filter)"). CSS-Filter werden über das filter-Attribut dem gewünschten Element zugewiesen:

#elementID {
  filter: /*...*/;
}

SVG-Filter vs. CSS-Filter

Um einen direkten Vergleich zu haben, möchte ich kurz drei verschiedene Filter vorstellen. Zuerst jeweils die CSS-Variante und anschließend die äquivalente Umsetzung mit sog. SVG-Primitiven.

Unschärfe / Blur

Der Blur-Effekt bewirkt ein Verschwimmen bzw. Unscharf-Werden des Bildes. Die Pixelzahl gibt die Stärke der Unschärfe an. Je größer diese ist, desto verschwommener wird das Bild. In SVG wird dabei die Primitive „feGaussianBlur“ verwendet, in CSS die Funktion „blur()“. SVG

<feGaussianBlur in="SourceGraphic" stdDeviation="3" />

CSS

filter: blur(3px);

Tipp: Durch einen zweiten (unterschiedlichen) Wert im Attribut „stdDeviation“ kann eine Bewegungsunschärfe erzeugt werden, z.B.<feGaussianBlur in="SourceGraphic" stdDeviation="8 3" />. In diesem Beispiel werden die Pixel um den Faktor 8 auf der x-Achse und um den Faktor 3 auf der y-Achse in die Länge gezogen. Wird nur ein Wert angegeben, werden die Pixel in x- und y-Richtung jeweils um den gleichen Faktor vergrößert. Beim CSS-Filter kann dagegen nur genau ein Wert angegeben werden.

Original

SVG: stdDeviation=“3″

SVG: stdDeviation=“8 3″

CSS: blur(3px)

Graustufen / Grayscale

Mit Hilfe der Filter kann aus einem normalen Bild ein Schwarz-Weiß-Bild erzeugt werden. Hierbei ist gut zu sehen, dass SVG mehr Möglichkeiten bei der Umsetzung bietet, gleichzeitig aber auch wesentlich komplexer ist als CSS. SVG

<feColorMatrix type="matrix" 
    values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>

CSS

filter: grayscale(100%);

Original

SVG: feColorMatrix

CSS: grayscale(100%)

Sättigung / Saturation

SVG

<feColorMatrix in="SourceGraphic" type="saturate" values="5" />

CSS

filter: saturate(500%);

Original

SVG: feColorMatrix

CSS: saturate(500%)

SVG-Filter feat. CSS-Filter

SVG-Filter sind auch zusammen mit CSS nutzbar und sogar wiederverwendbar, indem den Filtern IDs zugewiesen werden. Über diese IDs können sie dann innerhalb von CSS angesprochen werden und auch auf mehrere Elemente angewendet werden.

img {
  filter: url(#filterId);
}

<svg width="250px" height="250px">
  <defs>
    <filter id="filterId">
      <!-- ... -->
    </filter>
  </defs>
</svg>

<img src="sonne.jpg" />

SVG-Filter im Einsatz

Um nur mal einen kleinen Einblick zu geben, wofür SVG-Filter eingesetzt werden können, folgen zwei Beispiele.

Bild mit Schatten

Um einem Bild einen Schatten zu geben, wird die Primitive „feDropShadow“ benötigt. Wichtig ist dabei zu beachten, dass die Größe des Gesamtbereichs (<svg>-Tag) größer sein muss als die des Bildes, da sonst der Schatten nicht angezeigt wird (quasi wie overflow: hidden;in CSS).

<svg width="300px" height="300px">
  <defs>
    <filter id="dropShadow">
      <feDropShadow dx="10" dy="10" stdDeviation="5"/>
    </filter>
  </defs>
  <image xlink:href="img/sonne.jpg" width="200" height="200" x="0" y="0" filter="url(#dropShadow)"></image>
</svg>

Bild mit Schatten

Button mit 3D-Effekt

Aus einem unschönen Button lässt sich mit verschiedenen Primitiven eine 3D-Variante davon erzeugen:

vorher

<svg width="500px" height="306px">
  <defs>
    <filter id="3d" filterUnits="userSpaceOnUse" x="0" y="0" width="270" height="270">
      <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
      <feOffsetin="blur" dx="4" dy="4" result="offsetBlur"/>
      <feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75" specularExponent="20" lighting-color="#bbbbbb" result="specOut">
        <fePointLight x="-5000" y="-10000" z="20000" />
      </feSpecularLighting>
      <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut" />
      <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litPaint" />
      <feMerge>
        <feMergeNode in="offsetBlur" />
        <feMergeNode in="litPaint" />
      </feMerge>
    </filter>
  </defs>

  <a href="somewhereOverTheRainbow.html">
    <image xlink:href="button.png" filter="url(#3d)"></image>
  </a>
</svg>

nachher

Fazit

Man kann sich in den nahezu endlosen Tiefen der SVG-Filter verlieren, vor allem wenn man sich in die Vektor-Berechnung der RGBA-Werte für Beleuchtungen oder Farbspektren reinfuchst und mehrere Primitiven miteinander vereint. Darauf an dieser Stelle einzugehen, würde aber den Rahmen deutlich sprengen. Wer sich das dennoch antun möchte, findet die komplette englischsprachige Dokumentation aller Primitiven beim W3-Consortium. Für den Hausgebrauch reichen natürlich die CSS-Filter. Wer allerdings mehr Individualität möchte, dem seien die SVG-Filter wärmstens empfohlen.