SVG-Sprites: Skalierbare Icons für das Multi-Display-Web
Kommentare

Sollen – wie heutzutage im Grunde Standard – Webinhalte auf verschiedenen Geräten gleich gut dargestellt werden, führt kein Weg an der Verwendung entsprechend skalierbarer Bilder und Icons vorbei.

Sollen – wie heutzutage im Grunde Standard – Webinhalte auf verschiedenen Geräten gleich gut dargestellt werden, führt kein Weg an der Verwendung entsprechend skalierbarer Bilder und Icons vorbei. Eine gängige, leider jedoch auch nicht ganz unproblematische Lösung stellt dabei der Einsatz von Icon-Fonts dar.

SVG-Sprites als Alternative

Der Frontend-Entwickler Sven Wolfermann bespricht in seinem Blog eine über weite Strecken elegantere Alternative zu Icon-Fonts: SVG-Sprites.

Dabei kommen sowohl die allgemeinen Vorteile von SVG-Sprites zur Sprache, als auch Spezialthemen und -fälle wie die Erstellung von SVG-Sprites aus einzelnen SVG-Dateien mithilfe des Grunt-Tasks SVG-Store, die Einbindung von SVG-Dateien in HTML und Styling mit CSS, Blurry Rendering in Firefox sowie ein SVG-Fallback für IE8 & Android 2.3.

Für alle Fälle gewappnet

Mögliche Probleme und Schwierigkeiten bei der Verwendung von SVG-Dateien wie die z.B. teils mangelnde Browser-Kompatibilität (die jedoch durch Einsatz der JS-Bibliothek SVG4everybody erreicht werden kann) fallen dabei jedoch genauso wenig unter den Tisch wie die Vorteile beim Einsatz von Icon-Fonts. Abgerundet wird Wolfermanns Plädoyer für SVG-Sprites mit zahlreichen Verweisen auf weiterführende Literatur für einen intensiveren Einstieg in die Thematik.

Aufmacherbild: set of colorful electronics. illustration design over a white background von Shutterstock / Urheberrecht: alexmillos

MobileTech Conference 2014

MobileTech Conference 2014

Mobile-Interessierte aufgepasst! Jede Menge spannende Sessions rund um Android, iOS und das Mobile-Web gibt es auf der MobileTech Conference, die vom 1. bis 4. September in Berlin stattfindet und mit mehr als 60 renommierten Mobile-Experten aufwartet. Als Teilnehmer kann man zusätzlich auch die Sessions der gleichzeitig stattfindenden Internet of Things Conference kostenlos besuchen. Wer sich bis für 3 Konferenztage zusätzlich das Intellibook-Tablet mit Android-OS, 7,85 Zoll-HD-Touch-Display und Dual-Core Rockchip-Prozessor als Geschenk oben drauf. Im Rahmen des Kollegenrabatts (3+ Kollegen) spart man ferner 10 Prozent extra. Alle Infos auf der MobileTech Conference Homepage.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -