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>')