Kategorie: SVG

Fieser Bug bei externen SVG-Sprites

Das war es dann wohl erst einmal mit extern geladenen SVG-Sprites, dank Apple. Nico Brünjes hat herausgefunden, dass die aktuellen Safari auf dem Desktop und iOS für jedes Icon das externe Spritesheet erneut anfordern. Das kann zu enormen Übertragungen führen und geht bei mobilen Geräten direkt ins Geld. Die Reaktion bei ZEIT Online, wo Nico arbeitet, ist nun die Einbettung der SVG-Datei. Dadurch wird der Bug umgangen. Leider entfällt so auch das Caching der Datei. Mit jeder Seite wird das Set an Icons immer mitgeladen. Auf der anderen Seite spart diese Lösung Polyfills für einige Browser ein.

Da Apple betroffen ist, ist die Chance auf eine schnelle Lösung des Problems gleich Null. Der Konzern hat in den letzten Jahren klar gemacht, dass er sich für seinen Browser nur rudimentär interessiert und Kommunikation mit der Community sowieso ablehnt.

Der Bug im Safari ist einfach zu heftig, als dass man ihn ignorieren könnte. Die Auswirkungen gehen beim Endnutzer direkt ins Geld. Das können wir nicht wollen. Nico weist in seinem zweiten Artikel darauf hin, dass Apple sogar SVG-Features aus den modernen Safari entfernt hat. Das macht keine Hoffnung. Auf absehbare Zeit sollten wir die Option „externes SVG-Spritesheet“ aus unseren Projekten streichen.

Animiertes SVG-Menü zusammenbauen lassen

Sara Soueidan ist die Entwicklerin, die man im Blick haben muss, wenn es um die Nutzung von SVG geht. Neben vielen tollen Talks und Artikeln hat sie jetzt ein Tool veröffentlicht, mit dem man ein auf SVG basierendes animiertes Menü erstellen kann. Die Menüpunkte können dabei im Kreis oder in einem Teil eines Kreises angeordnet werden. Nicht nur das Tool ist interessant, auch die Erläuterungen von Sara dazu sind es. Es gibt zudem zu einzelnen Beispielen Codepens, mit denen man selber experimentieren kann.