Mit SVGs zum auflösungsunabhängigen Web
Kommentare

Bilder im Netz – für viele Webdesigner ist das nach wie vor ein viel diskutiertes Thema. Wie lassen sich Bilder am besten in Websites einbinden, damit jedem Nutzer eine zufriedenstellende User Experience

Bilder im Netz – für viele Webdesigner ist das nach wie vor ein viel diskutiertes Thema. Wie lassen sich Bilder am besten in Websites einbinden, damit jedem Nutzer eine zufriedenstellende User Experience geboten wird, egal, welchen Browser sie benutzen? Und wie lässt sich das Ganze dann auch noch responsiv gestalten? Die Nutzung von SVGs kann eine Antwort auf diese Fragen sein, bieten sie doch zahlreiche Vorteile gegenüber Raster-Formaten wie PNGs oder JPEGs. Angelos Chaidas erklärt, wie der Weg zu einem auflösungsunabhängigen Web mit SVGs aussehen kann.

SVGs im UI-Design: Fokus auf Typography, Layout, Icons

Alles wird flacher im Netz, insbesondere im UI-Design. Der Fokus liegt immer mehr auf Typographie, Layout und Icons – für deren Umsetzung SVGs durch ihre größenvariable Anpassung besonders geeignet sind, weil Webdesigner sich so weniger Gedanken darüber machen müssen, wie das Bild auf verschiedenen Devices mit unterschiedlichen Displaygrößen aussieht. Tatsächlich müssen Designer nur eine einzige SVG-Datei exportieren, die vom Entwickler ohne Qualitätsverlust in ihrer Größe verändert werden kann.

Zudem verfügen Browser über immer bessere Möglichkeiten, mit denen Bilder skaliert werden können. Während bei der Arbeit mit Bildbearbeitungsprogrammen häufig das gleiche Bild in verschiedenen Pixelgrößen erstellt werden muss, lassen sich SVGs deutlich einfacher in der Größe anpassen, ohne Qualitätseinbußen hinnehmen zu müssen.

Ein weiterer Vorteil von SVGs für Webdesigner ist, dass sie sich leicht optimieren lassen, etwa indem Text direkt in der SVG-Datei eingebettet wird, wodurch sie weniger komplex und vor allem kleiner ist. Auch gibt es gute Open-Source-Tools wie Inkscape, die sich als Alternative für die Arbeit mit Vektoren anbieten.

Vorteile von SVGs für Entwickler

Nicht nur für Webdesigner bieten SVGs viele Vorteile, auch Entwickler können mit SVGs zahlreiche Möglichkeiten bei der Implementierung von Bildern im Netz umsetzen, die ihnen die Arbeit erleichtern. So sind SVG-Dateien auflösungsunabhängig und lassen sich mit den im CSS spezifizierten Dimensionen in der Größe anpassen, wodurch sich die gleiche SVG-Datei auch an mehreren Stellen einer Website verwenden lässt.

Zudem können SVGs mit CSS3 animiert werden, sowohl im Ganzen, als auch nur individuelle Elemente der SVG-Datei. Dadurch können SVGs auch interaktiv in eine Website eingebunden werden, etwa als interaktive Infografik.

Ein wichtiger Vorteil von SVGs gegenüber PNGs oder JPEGs ist auch, dass SVGs mithilfe des -Elements direkt im HTML-Code eingebunden und mit CSS kontrolliert werden können. Zudem gibt es die Möglichkeit, für ältere Browser-Versionen, die keine SVGs unterstützen, mit PNGs eine elegante Fallback-Lösung zu implementieren.

Wie Angelos Chaidas in seinem Artikel Towards a Resolution-Independent Web with SVG – der übrigens noch weitere Vorteile von SVGs bespricht – zeigt, überwiegen die Vorteile der Nutzung von Vektorgrafiken bei der Einbindung von Bildern im Netz. Gerade durch einen sehr guten Browser-Support sowie elegante Fallback-Lösungen für Browser, die keine SVGs unterstützen, lassen sich Bilder im SVG-Format besonders leicht in Websites einbinden und sorgen dafür, dass auch auf kleinen Displays die User Experience nicht verloren geht.

Aufmacherbild: yes is the best von Shutterstock / Urheberrecht: antoniomas

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -