Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen

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 zur 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.

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Seminare mit Jonas Hellwig anzeigenJonas Hellwig bei Xing

Feedback & Ergänzungen – 4 Kommentare

  1. Flashcast
    schrieb am 10.09.2019 um 16:51 Uhr:

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

    Antworten
  2. jer
    schrieb am 07.09.2019 um 13:32 Uhr:

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

    Antworten
  3. Franko
    schrieb am 15.08.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“);

    Antworten
    • Jonas Hellwig (Autor)
      schrieb am 15.08.2019 um 20:29 Uhr:

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

      Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →

Unsere Agentur in Berlin realisiert vom durchgestylten One-Pager bis zur funktionalen Konzern-Website Projekte mit sehr unterschiedlichem Umfang. Wir haben u.a. mit folgenden Kunden erfolgreich zusammengearbeitet: