SVG als CSS-Background nutzen
Grundsätzliches
- Einbindung via SVG bzw. Polygon-Element
- nach folgender Struktur
<svg height="210" width="500">
<polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
Quelle und erste Einführung: https://www.w3schools.com/graphics/svg_polygon.asp
Grundformen
Kreis
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
Sorry, your browser does not support inline SVG.
</svg>
Rechteck
<svg width="400" height="110">
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
Sorry, your browser does not support inline SVG.
</svg>
Linie mit unterschiedlichen Punkten
Beispiel Treppe
<svg height="180" width="500">
<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style="fill:white;stroke:red;stroke-width:4" />
Sorry, your browser does not support inline SVG.
</svg>
Farben
- werden für die Fläche über "fill" definiert
- werden für den Rand über "stroke" definiert
- vordefinierte Farbtöne (https://wiki.selfhtml.org/wiki/Grafik/Farbe/Farbpaletten#Farbnamen) funktionieren ohne Probleme
- damit Hex-Codes funktionieren, muss %23 statt # geschrieben werden (das ist der Wert des maskierten #-Zeichens) --> https://codepen.io/gunnarbittersmann/pen/BoovjR
"Icons"
Stern
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>');
Pfeil
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%23239de8%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23239de8%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");
Farbe anpassen: "fill%3D%22%23239de8" (hellblau) durch "fill%3D%22%23cccccc" (grau) ersetzen
Kreis
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><circle fill="%23CCCCCC" cx="10" cy="10" r="10"/></svg>')