@@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 <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`: ***M**ove to*{:@en} Punkt (48, 13) – die Spitze des Daches * `L9,48`: ***L**ine to*{:@en} Punkt (9, 48) – das linke untere Ende des Daches * `H20`: ***H**orizantal line to*{:@en} *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`: ***V**ertical line to*{:@en} *y* = 0, *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 <svg xmlns="http://www.w3.org/2000/svg" style="display: none"> ~~~ (Das `hidden`-Attribut gibt’s für `svg`-Elemente nicht; `<svg hidden>`{:.language-html.bad} funktioniert nicht.)   „Von anderswo holen“ heißt für uns jetzt: ein weiteres `svg`-Element. ~~~HTML <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à!**{:@fr} 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: ~~~HTML <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: ~~~CSS 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!**](https://codepen.io/gunnarbittersmann/pen/Ooypov)   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 steht 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: ~~~HTML <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> sweet <a href="">home <svg><use href="#house"/></svg></a> </p> ~~~ Aber eigentlich soll gar nicht alles SVG in HTML eingebettet sein. Dazu später mehr … LLAP 🖖 -- *„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“* —Kurt Weidemann