kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

SVG als CSS-background verwenden und umfärben

Das Grafikformat SVG bietet sich aufgrund geringer Dateigrößen, verlustfreier Skalierung und zahlreicher Manipulationsmöglichkeiten für viele Anwendungsfälle an. Die verschiedenen Möglichkeiten SVG in eine Website einzubauen haben alle Vor- und Nachteile. Ein Nachteil beim Einsatz als background-image im CSS-Code besteht darin, dass die SVG nicht mehr umgefärbt werden kann. Insbesondere beim Einsatz von Icons kann das lästig sein. Mit Sass und Data URIs gibt es jedoch eine Lösung.

Workshops und Seminare von kulturbanause

Adobe XD, Performance, Responsive Design, Sketch, Visual Prototyping, Web Animationen, Corporate Design …

Jetzt Frühbucher-Rabatte sichern!

Ziel dieses Beitrags

Wir werden ein SVG-Grafik in Form eines Sterns als CSS background-image in einen <div> einfügen. Anschließend erzeugen wir mit Hilfe von Sass drei CSS-Klassen, die die Farbe des Sterns steuern.

Der Aufbau des Beispiels im HTML-Code ist denkbar simpel. Es gibt drei <div>-Elemente. Die Klassen für die Farben bereiten wir schon einmal vor:

<div class="blue"></div>
<div class="red"></div>
<div class="lime"></div>

Im CSS-Code definieren wir ein Standard-Styling für alle drei <div>. Dieser Code dient nur dem besseren Verständnis des Beispiels und hat mit der eigentlichen Funktion nichts zu tun.

div {
  height: 100px;
  width: 100px;
  background-size: 100%;
  margin: 1em;
}

Inline-SVG in als CSS background-image

SVG-Grafiken können inline in die url()-Funktion von CSS integriert werden. Dazu muss lediglich der MIME-Type und der Zeichensatz korrekt angegeben werden. Anschließend folgt der ganz normale SVG-Code.

div { 
  background-image: url("data:image/svg+xml;utf8,<svg> … </svg>");
}

Am Beispiel der Stern-Grafik sieht der Code dann beispielsweise so aus:

div {
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 166 166"><polygon fill="red" points="83 26.8 65.7 61.8 27.1 67.4 55 94.7 48.5 133.2 83 115 117.5 133.2 111 94.7 138.9 67.4 100.3 61.8 83 26.8 83 26.8"/></svg>'); 
}

Der Stern wird in SVG mittels <polygon> dargestellt. Die Farbe (rot) ist hier über das SVG-Attribut fill hinzugefügt worden. Es gibt auch andere Möglichkeiten SVGs einzufärben; die Verwendung eines Attributs ist hier allerdings notwendig, damit später der Wert getauscht werden kann.

In Illustrator kann detailliert eingestellt werden wie SVGs exportiert werden sollen. Dort steht beispielsweise die Verwendung von Attributen zu Auswahl. Beachtet bitte, dass schwarze Farbe nicht als Attribut exportiert wird, da es sich um die Standard-Farbe handelt.

Das Beispiel sieht aktuell so aus:

Drei rote Sterne auf weißem Grund
Zwischenschritt: Drei als CSS-Background eingefügt SVG-Sterne in roter Farbe


Farbe per Sass-Funktion steuern

Nun kommt Sass ins Spiel um die Farbe steuern zu können. Die CSS url()-Funktion mit integriertem Inline SVG wird in eine Sass-Funktion namens svg-icon-stern() geschrieben. Der Funktion wird die Variable $farbe mitgegeben, die im fill-Attribut der SVG wieder ausgegeben wird.

@function svg-icon-stern($farbe) {
  @return url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 166 166"><polygon fill="'+$farbe+'" points="83 26.8 65.7 61.8 27.1 67.4 55 94.7 48.5 133.2 83 115 117.5 133.2 111 94.7 138.9 67.4 100.3 61.8 83 26.8 83 26.8"/></svg>');
}

Die Funktion wird in den einzelnen CSS-Klassen wieder aufgerufen. Über die Angabe des Farbnamens wird die Farbe des Icons gesteuert.

.red {
  background-image: svg-icon-stern(red);
}

.lime {
  background-image: svg-icon-stern(lime);
}

.blue {
  background-image: svg-icon-stern(blue);
}

Sass kompiliert den oben gezeigten SCSS-Code zu diesem CSS-Code:

.red {
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 166 166"><polygon fill="red" points="83 26.8 65.7 61.8 27.1 67.4 55 94.7 48.5 133.2 83 115 117.5 133.2 111 94.7 138.9 67.4 100.3 61.8 83 26.8 83 26.8"/></svg>'); }
.lime {
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 166 166"><polygon fill="lime" points="83 26.8 65.7 61.8 27.1 67.4 55 94.7 48.5 133.2 83 115 117.5 133.2 111 94.7 138.9 67.4 100.3 61.8 83 26.8 83 26.8"/></svg>'); }
.blue {
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 166 166"><polygon fill="blue" points="83 26.8 65.7 61.8 27.1 67.4 55 94.7 48.5 133.2 83 115 117.5 133.2 111 94.7 138.9 67.4 100.3 61.8 83 26.8 83 26.8"/></svg>'); }

Das finale Beispiel sieht so aus:

Das Endergebnis. Drei Icons, die als CSS-Background geladen wurden und mit Hilfe von Sass eingefärbt wurden

Bitte beachtet, dass Hexadezimalfarben in der Sass-Funktion codiert werden müssen. Das verkompliziert die Angelegenheit spürbar. Einen Lösungsansatz dazu findet ihr hier.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

4 Kommentare

  1. Franko

    Verfasst am 15. August 2019 um 14:21 Uhr.

    Evtl. sollte man erwähnen das dies im IE ( wohl aber im Edge ) so nicht funktioniert,
    auch wenn man gesetzt hat.

    Siehe dazu auch:
    https://codepen.io/tigt/post/optimizing-svgs-in-data-uris

    Entsprechend funktionierte in diesem Zusammenhang z.B. bei mir:
    background-image: url(„data:image/svg+xml,%3Csvg xmlns=’http://www.w3.org/2000/svg‘ viewBox=’0 0 166 166’%3E%3Cpolygon fill=’red‘ points=’83 26.8 65.7 61.8 27.1 67.4 55 94.7 48.5 133.2 83 115 117.5 133.2 111 94.7 138.9 67.4 100.3 61.8 83 26.8 83 26.8’/%3E%3C/svg%3E“);

    • Jonas Hellwig

      Verfasst am 15. August 2019 um 20:29 Uhr.

      Hey Franko, vielen Dank für deine Ergänzung!

  2. jer

    Verfasst am 7. September 2019 um 13:32 Uhr.

    Wieder mal absolut geiler Content!
    Mit euren Tipps werd ich CSS so langsam mächtig :-)
    Liebe Grüße, Jeremy

  3. Flashcast

    Verfasst am 10. September 2019 um 16:51 Uhr.

    Vielen Dank.
    Das gleiche kann man auch mit CSS Varialble machen.

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.