Für eine UL / LI Liste möchte ich als background-image ein aus Inkscape generiertes Icon (6 Kurvenpunkte) verlinken, nicht als Datei sondern als svg/xml code direkt ins CSS einfügen. Die Farbe des Icon sollte anpassbar sein, sowie ein Versatz des Icon mittels margin oder padding.

Ich konnte online viel über das Erstellen von SVG Dateien finden, aber leider nichts zur direkten Integration ins CSS. Vielleicht suche ich falsch, oder vielleicht ist meine Inkscape Ausgabe falsch, … hat vielleicht jemand so was umgesetzt und kann ein Beispiel oder einen Link posten?

Selbst noch nicht getestet, aber vor ein paar Monaten mal ein paar Lesezeichen zu dem Thema gesetzt:

https://kulturbanause.de/blog/svg-al...und-umfaerben/

https://css-tricks.com/lodge/svg/21-get-two-colors-use/

https://css-tricks.com/probably-dont-base64-svg/

Dürfte alles nicht genau das sein was du brauchst. Eventuell hilft es aber trotzdem.

Das ist hinsichtlich des CSS wonach ich gesucht hatte. Zum SVG bezgl. der Kurvenpunkte x,y habe ich eine manuelle Lösung gefunden. Ich übernehme die x u. y Werte einfach aus einem Grafikprogramm, durch jeweiliges markieren der Knotenpunkte x komma y. Tauscht man diese (erster Link) in polygon points aus, hat man das Ergebnis. Ich habe zus. fill-rule:nonzero; hinzugefügt, weil ich keine transparenten Bereiche in meinem Icon habe. Das funktioniert in Safari, Firefox u. Tor, Mac und Win. Edge habe ich nicht getestet, da background-image kein Problem sein sollte.

Danke!