SVG-Filter: So wendest du sie auf HTML-Elemente an

Mit der Hilfe von CSS3 fügst du einem Element unter anderem Unschärfe, Schlagschatten, Helligkeit und Kontrast  hinzu. Insgesamt zehn solcher Filter stehen dir zur Verfügung. Auch das SVG-Format kennt Filtereffekte. Teils überschneiden sich die Möglichkeiten, so etwa bei der Unschärfe. Aber das SVG-Format kennt eine Reihe zusätzlicher Filter, die mit CSS3 allein nicht zu realisieren sind. Ohne großen Aufwand fügst du aber beliebige SVG-Filter einem HTML-Element hinzu.

SVG-Filter: So wendest du sie auf HTML-Elemente an

Welche SVG-Filter gibt es?

Während CSS3 also auf zehn verschiedene Filter kommt, bietet das SVG-Format 19 Filter an. Da gibt es zum Beispiel „<feConvolveMatrix>“, der Pixel eines Bildes mit benachbarten Bildpunkten vermischt. So entstehen Verwischeffekte, die der Bewegungsunschärfe in Photoshop ähneln. Mit „<feGaussianBlur>“ wendest du eine Gauß’sche Unschärfe an und „<feMorphology>“ sorgt dafür, dass die Pixel eines Bildes verdünnt oder verdickt werden.

svg-filter_original_verdickung
Originalbild und auf das Bild angewandter „<feMorphology>“-Filter

Mit dem Filter „<feColorMatrix>“ sind verschiedene Farbmanipulationen möglich, um beispielsweise Sättigung, Farbton und Helligkeit eines Bildes zu verändern.

Die beiden Filter „<feDiffuseLighting>“ und „<feSpecularLighting>“ erlauben es dir, Beleuchtungseffekte – für diffuses oder reflektiertes Licht – zu einem Bild hinzuzufügen. Dabei lassen sich mit „<feDistantLight>“, „<fePointLight>“ oder „<feSpotLight>“ unterschiedliche Lichtquellen definieren.

svg-filter_beleuchtung
Bild mit Beleuchtungsfilter

Es gibt noch eine Reihe anderer Filter, die teils unspektakulär sind, wie „<feOffset>“, welches ein Bild lediglich verschiebt, und teils sehr speziell, wie „<feTurbulence>“, welcher Turbulenzen und Fraktale erzeugt.

SVG-Filter erstellen und anwenden

Willst du SVG-Filter auf beliebige HTML-Elemente anwenden, muss per SVG nur der Filter selbst ausgezeichnet werden. Dies sollte innerhalb des „<defs>“-Abschnitts geschehen. Dieser ist für Elemente wie Muster, Verläufe oder Filter gedacht – also für Elemente, die selbst nicht sichtbar sind, sondern auf andere Elemente angewendet werden. Außerdem müssen Filter innerhalb des Elementes „<filter>“ platziert werden.

<svg>
  <defs>
    <filter id="bewegungsunschaerfe">
      <feConvolveMatrix order="20, 1" kernelMatrix="1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1" />
    </filter>
  </defs>
</svg>

Im Beispiel wird der Filter „<feConvolveMatrix>“ ausgezeichnet. Über des Attribut „order“ wird angeben, wie viele benachbarte Pixel auf der X- und Y-Achse einbezogen werden sollen. Im Beispiel sollen nur Pixel auf der X-Achse vermischt werden, sodass eine Bewegungsunschärfe entsteht. Die per „order“ definierten Werte ergeben eine Matrix – im Beispiel 20 mal 1 Pixel. Per „kernelMatrix“ gibst du Werte für jeden Bildpunkt der Matrix an. Da die Matrix im Beispiel aus nur einer Zeile besteht, müssen 20 Werte für diese Zeile angegeben werden. Per Komma getrennt würden Werte für weitere Zeilen übergeben.

svg-filter_bewegungsunschaerfe
Bild mit Bewegungsunschärfe

Damit der Filter auf andere Elemente innerhalb des HTML-Dokumentes angewendet werden kann, braucht er eine ID. Anschließend übergibst du die ID des  SVG-Filter an die CSS3-Eigenschaft „filter()“.

img {
  filter: url(#bewegungsunschaerfe);
}

Im Beispiel wird der Filter auf alle „<img>“-Elemente angewendet. Zu beachten ist, dass die Eigenschaft „filter“ bei einigen Browsern nur mit entsprechendem Vendor-Prefix funktioniert.

Während moderne Browser wie Chrome und Firefox die Möglichkeit, SVG-Filter auf beliebige Elemente anzuwenden, unterstützen, funktioniert das Ganze im Internet Explorer und auch in Microsofts neuem Browser Edge (noch) nicht.

Filter kombinieren und auf Texte anwenden

Natürlich kannst du Filter miteinander kombinieren. Dazu zeichnest du innerhalb eines „<filter>“-Elementes einfach mehrere Filter aus.

svg-filter_bewegungsunschaerfe-farbton
Bild mit Bewegungsunschärfe und Farbtonänderung

<svg>
  <defs>
    <filter id="bewegungsunschaerfe_tonwert">
      <feConvolveMatrix order="20, 1" kernelMatrix="1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1" />
      <feColorMatrix type="hueRotate" values="-90" />
    </filter>
  </defs>
</svg>

Im Beispiel werden die Filter „<feConvolveMatrix>“ mit „<feColorMatrix>“ kombiniert. Letzterer sorgt dafür, dass per „type“ eine Farbtonänderung („hueRotate“) von 90 Grad erzielt wird.

svg-filter_bewegungsunschaerfe_text
Text mit Bewegungsunschärfe

Wie anfangs erwähnt, funktionieren die Filter nicht nur bei Bildern, sondern bei allen HTML-Elementen. So lassen sich zum Beispiel interessante Texteffekte realisieren. Auf eine Überschrift angewendet, erhält diese dann etwa eine Bewegungsunschärfe.

Beispiele auf Codepen

(dpe)

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Sortiert nach:   neueste | älteste | beste Bewertung
Franz Meyer
Gast
Franz Meyer
3 Monate 25 Tage her

Sehr interessant!
Wie kann man denn so einen Filter auf ein Hintergrundbild anwenden?

wpDiscuz

Mit der Nutzung unseres Angebots erklärst du dich damit einverstanden, dass wir Cookies verwenden. Weitere Informationen

Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anzubieten und die Zugriffe auf unsere Website zu analysieren. Dadurch geben wir nicht personenbezogene Informationen zur Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Nähere Informationen findest du in unserer Datenschutzerklärung. Durch die Weiternutzung unserer Website (oder das ausdrückliche Klicken auf "Einverstanden") gehen wir davon aus, dass du mit der Verwendung von Cookies einverstanden bist.

Schließen