SVG – weniger Pixel, mehr Fun!
Kommentare

SVG ist bei weitem keine Neuigkeit mehr – seit 1999 existiert das Grafikformat, kann sich aber erst jetzt so richtig durchsetzen. Zu verdanken ist das unter anderem dem Umstand, dass langsam aber sicher

SVG ist bei weitem keine Neuigkeit mehr – seit 1999 existiert das Grafikformat, kann sich aber erst jetzt so richtig durchsetzen. Zu verdanken ist das unter anderem dem Umstand, dass langsam aber sicher alle Browserhersteller eine vernünftige Unterstützung bieten. Und natürlich der Tatsache, dass es sich aufgrund seiner Skalierbarkeit hervorragend dafür eignet, auch auf hochauflösenden Displays gut auszusehen; und davon gibt es schließlich mittlerweile einige.

Viele Display, viele Ausgabegeräte, viele Probleme

Gerade für Logos, mehrfarbige Icons und vollflächige Grafiken ist SVG das ideale Format. Durch die Möglichkeit mit CSS Änderungen im SVG vorzunehmen, sowie Animationen und Transitions zu verwenden, ist SVG das perfekte Hilfsmittel für modernes Webdesign. Nicht vergessen darf man dabei, dass die Masse und Größe an Dateien, Bildern und Fotos im Web extrem zugenommen hat. Im Schnitt reden wir hier von einem Volumen von 1,2 MB pro Seite. Gerade im mobilen Umfeld kann hier viel eingespart werden.

Doch es sprechen viele Gründe für SVG, wie Sven Wolfermann auf seiner Session SVG – weniger Pixel, mehr Fun! auf der WebTech Conference 2014 in München dargelegt hat:

  • SVGs sind skalierbar und Retina-ready
  • Sie enthalten HTML-ähnliche Elemente
  • CSS3 und JavaScript können darauf angewandt werden
  • SVGs sind Printer-firneldy
  • Sie besitzen Features für die Accesibility und SEO
  • SVGs sind gzip-friendly
  • Es gibt zahlreiche Filter, Animationen und mehr

Generell lässt sich beobachten, dass viele Dinge, die jetzt in CSS vorhanden sind, aus SVG kommen.

Wie viel in diesem Format steckt, das als Bild, Object, iFrame, als Hintergrundbild in CSS und sogar inline mit HTML5 eingebunden werden kann, hat er ebenfalls eindrucksvoll gezeigt; beispielsweise anhand eines responsiven Icons in Form eines Home-Buttons, der je nach Größe des Displays detaillierter oder eben eher zurückgenommen dargestellt wird.

Über andere Beispiele hatten wir ebenfalls bereits berichtet, wie beispielsweise responsive Landkarten mit SVG, SVG-Sprites für skalierbare Icons oder über die fluide Einbettung von Grafiken auf Websites

Die Slides zu Svens Vortrag findet man übrigens auf seiner Website – inklusive zahlreicher Code-Beispiele und noch mehr Demos, die eindrucksvoll die volle Stärke von SVGs unter Beweis stellen. Es gibt also keinen Grund mehr, nicht mindestens einen Blick zu riskieren!

Aufmacherbild: Svg file icon vector von Shutterstock / Urheberrecht: Wiktoria Pawlak

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -