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

eye-161558_640

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.

Sonne unbearbeitet

Original

Sonne stdDeviation="3"

SVG: stdDeviation=“3″

Sonne stdDeviation="8 3"

SVG: stdDeviation=“8 3″

Sonne mit CSS-Filter blur(3px)

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%);

Sonne unbearbeitet

Original

Sonne in Graustufen durch SVG

SVG: feColorMatrix

Sonne in Graustufen durch CSS

CSS: grayscale(100%)

 

Sättigung / Saturation

SVG

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

CSS

filter: saturate(500%);

Sonne unbearbeitet

Original

Sonne in gesättigten Farben durch SVG

SVG: feColorMatrix

Sonne in gesättigten Farben durch CSS

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>
Sonne mit Bildschatten durch SVG

Bild mit Schatten

Button mit 3D-Effekt

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

Button 2D

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>
Button 3D

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.

Links für Wissbegierige

Bildnachweis: Titelbild von Pixabay In-Text-Bilder © Anja Krüger

Das könnte Dich auch interessieren

Codecademy – Einstieg in die Welt des Programmierens

Der Einstig in die Welt des Programmierens ist schwer und es dauert lange bis man sich ein Grundwissen angeeignet hat. Heute ist es wichtiger denn je programmie...

Blisk – Ein Browser nicht nur für Entwickler

Die Entwicklung von heutigen Websites ist doppelt bis dreifach so komplex und umfangreich wie noch vor Jahren. Dies liegt in erster Linie an den vielen verschie...

Bootstrap

Was ist Bootstrap? Wie funktioniert es? Bootstrap ist, wie du sicher wusstest, eines der am weit verbreitetsten Open Source Frameworks, an das heutzutage in der...