Icon-System: SVG-Handling

[marctrix]

Hej alle,

irgendwie kann ich mich immer noch nicht mit SVG-Sprites anfreunden.

Ich mag es nicht, alles in einen Pott zu kippen und dann zu hoffen, dass alles drin ist und wenn es zu viel ist, wird es auch nie wieder entrümpelt.

Das trifft allerdings auch auf meine Methode zu. Irgendwie ist es mir sympathischer, meine SVGs direkt ins CSS zu schreiben. Man muss die nicht einmal base64-codieren und kann so direkt dort, wo man sich eh ums Styling kümmert, um das Aussehen der Icons kümmern.

Nachteile

1. die CSS-Dateien werden deutlich größer (mich stört das allerdings nicht, ich bewege mich da drinnen eh vor allem mit Strg+F). Dem könnte man — man denn möchte — mit einem Präprozessor begegnen
2. Wie bei SVG-Sprites müssen immer alle SVGs übertragen werden, wenn man alles in eine Datei packt — auch wenn jemand gar nicht alle Icons zu sehen bekommt. Hier wie da aufgrund der geringen Dateigröße eher unschön, als problematisch. Man spart sich http-Requests (zumindest ein Vorteil, so lange man nicht die 2er Version nutzt, die setzt sich aber immer mehr durch).

Vorteile

1. Zentrale Ablage für alle Layout-Komponenten

Überlegungen

Die genannten Nachteile lassen sich wohl mittels SASS lösen. Auch interessant für Farbthemes, mit custom properties lässt sich in den SVGs verständlicherweise nicht arbeiten und die werden eh noch nicht von allen relevanten Browsern unterstützt.

Auch ein Aufteilen auf mehrere CSS-Dateien ist denkbar (gerade unter HTTP2) — dann gibt es halt für jedes Icon eine CSS oder SCSS-Datei. Erfordert aber viel Überlegung und ich bin (im Gegensatz zu vielen anderen) kein Freund so einer Zersplitterung.

Weitere Möglichkeiten

Chris Coyier hat mal empfohlen, SVGs inline einzubinden. Finde ich auch ok. In dynamischen Websites fällt dabei wenig Handarbeit an. Allerdings müssen dann die Icons auf jeder Seite neu geladen werden. Bei wenigen Seiten nicht unbedingt ein Problem, insbesondere werden so nur wirklich benötigte Icons geladen.

Auf Websites, die man oft besucht oder auf denen man viele Seiten aufruft, wäre es natürlich sinnvoller, diese kämen aus dem Browser-Cache.

Also eine Fall-zu-Fall-Entscheidung? - Eigentlich kaum gangbar, denn Projekte entwickeln sich ja und meistens werden die nicht kleiner mit der Zeit.

Also wäre eine generelle Strategie sinnvoller.

Für mich „passt“ es im Moment am besten, die Icons direkt ins CSS zu schreiben:

url(data:image/svg+xml,[svg])

Wie macht ihr das denn so?

Marc