Mit CSS gelöst! SVG Hintergründe einfärben

Dieser Beitrag ist der erste in einer Reihe über die Macht von CSS.

CSS wird immer leistungsfähiger, und mit Funktionen wie CSS Grid und benutzerdefinierten Eigenschaften (auch bekannt als CSS-Variablen) sehen wir einige wirklich kreative Lösungen. Die Möglichkeiten dessen, was CSS zur Vereinfachung der UI-Erstellung tun kann, werden noch erforscht, und das ist aufregend!

Eine davon ist jetzt eine meiner Lieblingsfunktionen in CSS: Filter. Schauen wir uns an, wie wir Filter verwenden können, um ein Problem zu lösen, auf das Sie möglicherweise gestoßen sind, wenn Sie mit SVG als Hintergrundbild für ein Element arbeiten.

CSS-Filter

Zuerst beginnen wir mit einem Überblick über Filter. Sie umfassen die folgenden Funktionen

• blur()
• brightness()
• contrast()
• drop-shadow()
• grayscale()
• hue-rotate()
• invert()
• opacity()
• saturate()
• sepia()

Diese Effekte können auch mit SVG-Filtern oder WebGL-Shadern erzielt werden, aber CSS-Filter sind der einfachste Weg, grundlegende Transformationen auf die browserfreundlichste Weise zu implementieren. Da sie Abkürzungen für SVG-Filtereffekte sind, können Sie auch filter: url() verwenden und eine Filtereffekt-ID auf jedes Element anwenden. Wenn Sie mit benutzerdefinierten Filtern experimentieren möchten, empfehle ich Ihnen, sich cssfilters.co anzusehen.

Das Problem: SVG-Hintergründe bearbeiten

Ich liebe die Verwendung des SVG-Formats (Scalable Vector Graphics) für Webdesign. SVG ist ein großartiges Bildformat für das Web, und da es auf Code basiert, ermöglicht es hochwertige responsive und interaktive Inhalte. Wenn Sie SVG auf die Seite injizieren, haben Sie Zugriff auf jedes seiner internen Elemente und deren Eigenschaften, wodurch Sie sie animieren, Werte (wie Farbe) aktualisieren und dynamisch zusätzliche Informationen einfügen können. SVG ist auch ein großartiges Icon-Format, besonders anstelle von Icon-Schriften, und für kleinere UI-Elemente aufgrund seiner hohen Qualität (denken Sie an Retina-Displays) und seiner geringen Bildgröße (denken Sie an Leistung).

Ich stelle fest, dass oft, wenn SVG für diese kleineren Elemente oder als großer Illustrationsbereich verwendet wird, es der Einfachheit halber als Hintergrundbild eingebunden wird. Der Nachteil dabei ist, dass das SVG für den Entwickler nicht mehr unter seiner Kontrolle steht. Sie können keine einzelnen Eigenschaften, wie die Füllfarbe, eines SVG-Hintergrunds anpassen, da es wie jedes Bild behandelt wird. Dieser Farb-Konflikt kann mit CSS gelöst werden! Filter zur Rettung!

Helligkeit anpassen

Als ich zum ersten Mal die Herausforderung mit SVG-Hintergründen entdeckte, arbeitete ich an einer Website mit weißen SVG-Icons für Social-Share-Buttons, die auf einem Hintergrund platziert wurden, der passend zur Anwendung gestaltet war. Als diese Icons auf einen weißen Hintergrund verschoben wurden, waren sie nicht mehr sichtbar. Anstatt ein neues Icon zu erstellen oder das Markup zu ändern, um Inline-SVG einzufügen, können Sie filter: brightness() verwenden.

Mit dem brightness-Filter macht jeder Wert, der *größer* als 1 ist, das Element *heller*, und jeder Wert, der *kleiner* als 1 ist, macht es *dunkler*. So können wir diese hellen SVGs dunkel machen und umgekehrt!

Was ich oben gemacht habe, war, eine dark-Klasse mit filter: brightness(0.1) zu erstellen. Sie können auch das Gegenteil für dunklere Icons tun. Sie können Icons aufhellen, indem Sie eine light-Klasse mit etwas wie filter: brightness(100) oder was auch immer Ihren Bedürfnissen entspricht, erstellen.

Icons mit der Füllfarbe #000 oder rgb(0,0,0) werden nicht heller. Sie benötigen einen Wert größer als 0 in einem der rgb-Kanäle. fill: rgb(1,1,1) funktioniert gut mit einem hohen Helligkeitswert wie brightness(1000), aber selbst brightness(1000) funktioniert bei reinem Schwarz nicht. Dies ist bei hellen Farben und Weiß kein Problem.

Farbe anpassen

Wir haben jetzt gesehen, wie helle und dunkle Werte mit einem brightness()-Filter angepasst werden können, aber das liefert nicht immer den gewünschten Effekt. Was ist, wenn wir etwas Farbe in diese Icons einbringen wollen? Mit CSS-Filtern können wir das tun. Ein kleiner Trick ist, den sepia-Filter zusammen mit hue-rotate, brightness und saturation zu verwenden, um jede gewünschte Farbe zu erstellen.

Von Weiß aus können Sie die folgenden Mischungen verwenden, um die oben gezeigten Navy-, Blau- und Pink-Farben zu erhalten

.colorize-pink {
  filter: brightness(0.5) sepia(1) hue-rotate(-70deg) saturate(5);
}

.colorize-navy {
  filter: brightness(0.2) sepia(1) hue-rotate(180deg) saturate(5);
}

.colorize-blue {
  filter: brightness(0.5) sepia(1) hue-rotate(140deg) saturate(6);
}

Hier sind Ihnen die Möglichkeiten offen. SVG ist nur ein Anwendungsfall für mehrere Filter. Sie können dies auf jeden Medientyp anwenden – Bilder, GIFs, Videos, Iframes usw. – und die Unterstützung ist auch ziemlich gut.

Eine letzte Anmerkung: Denken Sie an Ihren Benutzer! Filter funktionieren nicht im Internet Explorer. Stellen Sie Ihren Benutzern daher bitte ein sichtbares Bild zur Verfügung (d.h. verwenden Sie kein weißes SVG mit angewendetem Filter auf weißem Hintergrund, da Ihre IE-Benutzer nichts sehen werden). Denken Sie auch daran, alternative Texte für die Barrierefreiheit von Icons zu verwenden, und dann können Sie diese Technik in Ihren eigenen Anwendungen verwenden!