SVG mittels CSS färben

[Gunnar Bittersmann]

Nachtrag

Dieses Tutorial ist ebenfalls im Self-Wiki mit interaktiven Live-Beispielen veröffentlicht:

SVG/Tutorials/Icons

Matthias Scharwies

---

@@Gunnar Bittersmann

Ich hatte schon damit angefangen:

Und zwar so: Als erstes das PNG in Photoshop geöffnet die Koordinaten der Eckpunkte des Hauses ausgelesen. Die dann als Pfad ergibt:

<svg xmlns="http://www.w3.org/2000/svg">
	<symbol id="house" viewBox="0 0 96 96">
		<path d="M48,13 L9,48 H20 V80 H40 V56 H56 V80 H76 V48 H87z"/>
	</symbol>
</svg>

Zu symbol später mehr. Erwähnenswert ist, dass nicht das svg-Element, sondern das symbol-Element hier das viewBox-Attribut trägt.

0 0 heißt, dass der Punkt links oben der Punkt (0, 0), also der Koordinatenursprung ist. Die x-Achse zeigt nach rechts; die y-Achse nach unten.

Die anden beiden Zahlen geben an, dass die Zeichenfläche 96 Einheiten breit und 96 Einheiten hoch ist. Die Maße hab ich vom PNG übernommen. Wichtig ist hier, dass es sich bei SVG um eine Längeneinheit handelt, nicht um Pixel. Man würde dasselbe Ergebnis erhalten, wenn man 0 0 480 960 setzt und bei den Koordinaten alle x-Werte mit 5 und alle y-Werte mit 10 multipliziert.

Der Pfad:

• M48,13: Move to Punkt (48, 13) – die Spitze des Daches

• L9,48: Line to Punkt (9, 48) – das linke untere Ende des Daches

• H20: Horizantal line to x = 20, y bleibt gleich, d.h. zum Punkt (20, 48) – Hauswand links oben
  (Ich hätte auch L20,48 schreiben können; das ist aber länger.)

• V80: Vertical line to y = 80, x bleibt gleich, d.h. zum Punkt (20, 80) – Hauswand links unten
  (Ich hätte auch L20,80 schreiben können; das ist aber länger.)

• usw. bis H87 zum letzten Punkt (87, 48) – rechtes unteres Ende des Daches

• z: schließe die Kontur, d.h. Linie zurück zum Ausganspunkt (48, 13) – der Spitze des Daches

Das Ganze in eine HTML-Datei (in den body) gepackt und wir sehen … nichts! symbol ist nicht dazu gedacht angezeigt zu werden, sondern dazu, dass man sich das von anderswo holen kann.

Allerdings wird Platz für das svg-Element freigehalten. Da wir das nicht wollen, ergänzen wir die erste Zeile zu:

<svg xmlns="http://www.w3.org/2000/svg" style="display: none">

(Das hidden-Attribut gibt’s für svg-Elemente nicht; <svg hidden> funktioniert nicht.)

„Von anderswo holen“ heißt für uns jetzt: ein weiteres svg-Element.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<use xlink:href="#house"/>
</svg>

use verwendet ein anderes Element und xlink:href="#house" gibt an, welches. Das bezieht sich auf das Element mit der ID house – das ist das symbol im anderen svg-Element. (Dass IDs eindeutig sein müssen, also house nicht als ID eines HTML-Elements in diesen HTML-Dokument auftreten darf, versteht sich von selbst.)

Et voilà! Das Haus sollte jetzt angezeigt werden – in irgendeiner Größe. Und in schwarz, weil wir im SVG keine Farbe angegeben haben. Das wollen wir auch nicht – dazu kommen wir später.

Und wenn wir dasselbe Icon nochmal haben wollen: noch ein svg mit use-Element. Als Beispiel gleich mit etwas Text drumrum:

<p>
	Home
	<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
		<use xlink:href="#house"/>
	</svg>
	<a href="">
		sweet home
		<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
			<use xlink:href="#house"/>
		</svg>
	</a>
</p>

Nun wollen wir nicht irgendeine Größe; und auch die Farbe festlegen. Das können wir im Stylesheet tun, wo bspw. auch die Angaben zur Farbe von Links einschließlich Hover- und Focus-Effekt (für Tastaturbedienung!) stehen:

a { color: steelblue }
a:focus, a:hover { color: crimson }
			
svg
{
	width: 1em;
	height: 1em;
	fill: currentColor;
}

Für SVG-Elemente gibt es teilweise andere CSS-Eigenschaften als für HTML-Elemente, wie hier fill. Damit können wir die Icons mit einer Farbe füllen, bspw. fill: rebeccapurple.

Wir können aber auch mit dem Schlüsselwort currentColor für die Icons jeweils die aktuelle Textfarbe übernehmen. In unserem Beispiel ist das für das erste Haus schwarz und für das zweite – wo das svg innerhalb des a-Elements ist – steelblue.

Und wenn sich beim Drüberfahren mit der Maus oder Fokussieren mit der Tastatur die Farbe des Links auf crimson ändert, dann ändert sich die Farbe des Icons mit! Wer’s nicht glaubt: ☞ bitteschön!

Was, bei euch sieht’s etwas anders aus?

In der PNG-Grafik (redundantes Akronym!) war um das Haus viel Rand. Ich habe die viewBox mal so gelegt, dass sie vom Haus weitgehend ausgefüllt wird: 8 0 80 80. (Die Koordinaten der Punkte im Pfad bleiben so wie sie waren.) Dann stehen die Häuser auf der Erde Grundlinie des Texts.

Zum Schluss sei noch erwähnt, dass bei in HTML eingebettem SVG keine XML-Namenraumangaben nötig sind. Wir können auch schreiben:

<svg style="display: none">
	<symbol id="house" viewBox="8 0 80 80">
		<path d="M48,13 L9,48 H20 V80 H40 V56 H56 V80 H76 V48 H87z"/>
	</symbol>
</svg>

<p>
	Home <svg><use href="#house"/></svg>
	<a href="">sweet home <svg><use xlink:href="#house"/></svg></a>
</p>

(EDIT: href geändert in xlink:href. Safari will das so.)

Aber eigentlich soll gar nicht alles SVG in HTML eingebettet sein. Dazu später mehr …

LLAP 🖖