svg einbinden - gruppe für füllung erstellen

[ionaselate]

Hallo zusammen!

Ich bin neu im Thema HTML und arbeite mich gerade ein, um mir eine Oberfläche für meine Homeautomation zu erstellen.
Ein Nutzer hat eine sehr schöne Oberfläche geteilt und ich wühle mich gerade durch den Code und die .css - Datei.
So wie ich das verstanden habe werden in der HTML verschiedene Gruppen verwendet, die in der .css definiert wurden - z. B. Ausrichtung, Füllung etc.

CSS-Ausschnitt:

.section .Klasse svg {
  stroke: #26bf75;
  fill: #26bf75;

Es werden verschiedene SVG's über Tags (#) eingebunden, die in einer Hauptdatei definiert wurden. So weit so gut.

<div class="Klasse"><svg viewBox="0 0 50 50"><use xlink:href="/Pfad/Sammeldatei.svg#Einzelsvg"></use></svg></div>

Nun möchte ich eine spezifische SVG über eine Variable einbinden.
Die Einzel-svg's, die über einen # eingebunden werden, werden mit xlink:href aufgerufen. Ich habe schon gelesen, dass xlink:href obsolet ist und nur noch href verwendet werden soll. Leider geht das nicht, da ich safari nutze :-(

Das klappt soweit auch. Leider ist die SVG farblos (bzw. hat sie die Farbe, die in der Datei definiert ist, ich hätte sie jedoch auch gerne über die Klassen definiert, analog zu den #-Aufrufen).

Über nur href die variable datei aufgerufen werden (klappt mit firefox). Um es mit safari zu nutzen habe ich den workaround über img gewählt. hierdurch kann ich leider die klassenattribute nicht nutzen (füllung).

Ich habe es so gemacht:

         <div class="Klasse"><img src="/Pfad/{{itemValue('Variablenname')}}.svg"></div>

Hierdurch muss ich die einzelnen SVG's (keine Sammeldatei) ablegen. An sich kein Problem. Nur habe ich versucht über die css-Datei Attribute festzulegen, was nicht geklappt hat.
Gibt es eine Möglichkeit entweder die svg über den img Aufruf zu füllen, oder alternativ die svg über eine Variable aufzurüfen mit xlink:href oder über einen anderen, safarikompatiblen weg?

Ich hoffe, ihr wisst was mein Problem ist bzw. was ich erreichen will.

 

[Tronjer]

Weil ich neulich selber vor dem Problem stand, eine Anzahl von Icons, die als SVGs vorlagen, auf einer Seite rendern zu müssen und dazu in unterschiedlichen Farben:

Man wandelt die SVGs in einen Webfont um und kann sie anschließend als normale CSS-Klassen einbinden. So, wie es Font Awesome auch macht. Die Umwandlung geht bsw. mit einem Task-Runner wie Gulp.