Formatieren mit css

[Christian Kruse]

Hallo marctrix,

die Verwendung von SVGs bringt durchaus auch Probleme mit sich. Im Rahmen der Arbeiten für das Forum habe ich auch überlegt, wie ich am besten den Icon-Font durch SVGs ersetze. Ein stumpfes einbinden via Inline-SVG an jeder Stelle, wo ich das Icon brauchte, hat zu zwei Problemen geführt: erstens war die Performance echt beschissen; die Browser hatten ernsthaft Probleme mit so vielen SVGs. Und zweitens stieg natürlich die Filesize an.

Eine Einbindung via <img> war möglich, hat mich aber so nette Features wie Einfärbung bei Hover gekostet, bzw. ich hätte sie durch weitere SVG-Varianten in den richtigen Farben erzeugen müssen.

Eine Einbindung via object finde ich sinnlos…

Zur Zeit binde ich sie am Anfang des Dokuments inline ein und blende sie dann via display:none aus und referenziere dann nur noch mit <use xlink:href="..."/> darauf. Das funktioniert ganz gut für die Performance und bietet mir die Möglichkeit des Stylings via CSS sowie der Manipulation via JS. Ist allerdings auch etwas unschön…

LG,
CK