In meinem Beitrag von gestern hatte ich euch ja erzählt, die Icons als SVG Dateien in TwentySeventeen eingebunden werden. Ich habe darauf einige Kommentare und Nachrichten erhalten die darauf hindeuten, dass viele von euch noch nicht wirklich mit dieser Methode gearbeitet haben und ich möchte daher noch einige hilfreiche Tipps nachreichen.

Einbindung als CSS-Background

Als erstes ein kleiner Nachtrag zu Einbindung, da diese Frage häufiger vorkam. Einige von euch verwenden Icons als CSS-Hintergrundsbild in einen „before-Pseudoelement“. Hierbei kam die Frage auf, ob man auch dort auf SVG-Dateien setzen könnte, als Ersatz für Icon-Fonts. Die Frage würde ich mit Ja beantworten, allerdings gibt es eine Einschränkung. Es ist nicht möglich, Icons aus einer eingebundenen SVG-Datei zu verwenden, wie ich es euch gestern mit dem <use> Tag gezeigt habe. Es ist aber sehr wohl möglich, Icons aus SVG-Symbolen einer externen Datei einzubinden. Das funktioniert wie folgt:

li::before {
	background-image: url(icons.svg#icon-circle);
}

Dieses CSS verwendet also eine externe Datei „icons.svg“ und hiervon dann das Symbol mit der ID „icon-circle“. Wenn ihr in eurem CSS diese externe Datei mehrfach verwendet, wird der Browser sie aber selbstverständlich nur einmal laden. Solltet ihr also noch immer mit Pseudoelementen arbeiten, dass wäre dies eine einfache Möglichkeit zur Umsetzung.

Eingebundene SVG-Icons per CSS stylen

Die oben gezeigte Einbindung hat aber einen gravierenden Nachteil. Es ist lediglich ein externes Bild, aus das man keinen Einfluss hat. Um einiges vielseitiger sind die Möglichkeiten bei eingebundenen SVG-Dateien. Möchte man beispielsweise ein Icon beim Hover in einer anderen Farbe darstellen, dann müsste man bei der externen Einbindung zwei Dateien verwenden (und diese auch erstellen). Mit eingebundenen SVG-Dateien ist das sehr einfach. Denn eine SVG-Datei ist selbst nur eine XML-Datei mir Tags und Attributen. Sie kann also genauso selektiert und beeinflusst werden, die HTML-Tags. Hier mal ein einfaches Beispiel:

<!-- Definition des Symbols-->
<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">
	<symbol id="icon-circle" viewBox="0 0 32 32">
		<circle cx="16" cy="16" r="16" />
	</symbol>
</svg>
 
<!-- Einbindung des Symbols -->
<svg class="icon-circle" xmlns:xlink="http://www.w3.org/1999/xlink">
	<use href="#icon-circle" xlink:href="#icon-circle"></use>
</svg>

Und hier ein wenig CSS um das SVG mit einer Farbe zu füllen und beim Hover mit einer anderen Farbe:

.icon-circle {
	fill: #ff3c41;
}

.icon-circle:hover {
 	fill: #47cf73;
}

Das Ergebnis könnt ihr in einem CodePen bestaunen (wird nach einem Klick ausgeführt):

Fazit

Ich hoffe, ich konnte euch mit diesem sehr einfachen Beispiel zeigen, die man eine SVG per CSS verändern kann, wenn diese direkt in die Seite eingebunden ist. Die Möglichkeiten sind natürlich grenzenlos.

Wie wäre es zum Beispiel mit einer CSS-Animation? Oder der Einfärbung verschiedener Teile eines SVG in unterschiedlichen Farben? All das ist möglich und wäre mit einer einfachen Icon-Font undenkbar.