Womit lässt sich <center> bei SVG-Grafiken ersetzen?

[fietur]

Vielen Dank für den Code, er hat mehr Probleme ausgeräumt, als gedacht.

Bei mir haben die Symbole bei einer Font-Größenänderung auf z.B. 2em nicht mitskaliert, sondern klebten in ihrer 1em-Größe links oben im skalierten Container (weil ich meinen Symbolen zusätzlich zum Data-Url auch Breite, Höhe und no-repeat mitgegeben hatte). Dadurch waren sie dann natürlich nicht mehr zentriert.

Durch die Verlagerung auf den umgebenden Container kann ich jetzt die Höhe weggelassen (aspect-ratio macht das möglich) und auch auf no-repeat verzichten, da das div durch das Symbol komplett ausgefüllt wird. Größenänderungen (mit der Fontgröße) sind jetzt unproblematisch.

Einziger Wermutstropfen: Ich kann die Farbe der Symbole nicht nachträglich ändern, sondern benötige für jede Farbe einen eigenen Data-Url.

In dieser Hinsicht sind inline SVG praktischer, da auf ihre Elemente mit CSS zugegriffen werden kann - durch die Vererbung, wie du auch eingangs bemerkt hast. Ein fill= oder stroke="currentColor" im Data-Url-SVG lässt sich nicht als Wildcard für die Farbe nutzen (z.B. durch color:red im CSS), sondern es bleibt beim voreingestellten Schwarz.

So gesehen ist der Einsatz von inline-SVG oder (einmalig) nachgeladenen ausgelagerten img-SVG's sicherlich sehr überlegenswert, wenn nicht sinnvoller. Aber an den Rändern des Sinnvollen gibt es immer etwas zu entdecken. Meine Seite beispielsweise kommt ohne externes CSS-File aus. Ich erzeuge und liefere das CSS zusammen mit der Seite aus. Das erlaubt mir, das "Farbschema des Tages" auszuliefern und auch andere Variablen und Bedingungen einzubauen. Daher ist auch der Einbau von Grafiken (nicht Fotos) ins CSS so reizvoll - ins ausgelieferte CSS kommt nur, was auch angezeigt werden wird.

Nochmals vielen Dank für die Diskussion und Hilfe. 👍