Icon-System: SVG-Handling

[marctrix]

Hej Rolf,

da Du mich schon gezielt erwähnst, muss ich mich wohl auch zu Wort melden 😀

😉

Ich habe mich bisher nur oberflächlich mit SVG beschäftigt und mit CSS Sprites noch gar nicht.

Also für den IE11 aus etwas wie src="../path/to/my_sprite.svg#my-icon" folgendes zu machen src="#my-icon".

Worum geht es hier? Um das src-Attribut eines <img> Elements?

Frage ist - woran erkennt man die zu manipulierenden Elemente? Das src Attribut ist dann schnell manipuliert.

SVGs sind ja Textdateien, also auch mehre Icons in einer Datei (Sprite). Jedes Icon bekommt eine eigene ID, mit der es identifiziert werden kann.

Das Sprite mit allen enthaltenen Icons kann man komplett in das HTML jeder Seite einfügen und dann mittels <use> unter Angabe der ID ein Icon beliebig oft ausgeben lassen.

Das funktioniert in jedem Browser bis hinunter zu IE9.

Besser wäre aber natürlich nicht das Sprite in jedes HTML-Dokument komplett einzufügen, sondern eine externe Datei zu verwenden, statt x Instanzen des Sprites — nämlich in jedem HTML-Dokument eine.

Da das IE9-11 nicht können und für viele der IE11 noch relevant ist, sollte müsste also nur die gesamte Sprite Datei in das HTML eingefügt werden und aus der Referenz, die ja nun auf das bereits geöffnete Dokument verweist, müsste der Pfad entfernt werden, so dass nur noch die ID übrig bleibt.

In einer schicken Variante könnte man in diesen alten Browsern jeden Aufruf eines Icons mittels use durch das Icon selber ersetzen.

Beides scheint mir als Laien relativ trivial und ich frage mich, was das svg4everybody (ein polyfill) da tut, um auf so viele Zeilen Code zu kommen. Scheint mir wie eine Kanone für Spatzen…

Vielleicht war das mal nötig, um noch andere Browser zu unterstützen, die heute keine Rolle mehr spielen.

Wie auch immer: Ich fände es schön, wenn man ein 8-20-Zeilen-Skript für den oben genannten Fall hätte, das man in unser Wiki einfügen kann, so dass es sich jeder rauskopieren kann.

In ein bis drei Jahren ist es sicher obsolet (obwohl sich alte IE-Versionen oft erstaunlich hartnäckig halten).

Auf CSS-Tricks wird das im Artikel „SVG 'use' with external Reference Take 2“ recht kurz erklärt, Take 1 enthält noch mehr Grundlagen.

Marc