SVGs – ein Grafikformat mit vielen Vorteilen

Responsive Design Day 2 auf der International PHP Conference und Webinale 2015

SVGs bieten zahlreiche Stärken für die Nutzung im Web. Darum ist es kein Wunder, dass das Grafikformat vor allem für die Einbindung von Bildern, Icons und mehr in Websites als der Go-to-Tipp zur Performance-Verbesserung gehandelt wird. Auch die Möglichkeit, SVGs mit CSS zu bearbeiten und zum Beispiel mit Animationen und Transitionen zu versehen, bietet Webdesignern viele Vorteile.

Gerade auch im Responsive Webdesign kommt man heutzutage kaum noch am SVG-Format vorbei. Wie sie dabei zum Beispiel verwendet werden können und wie sie am besten erstellt werden, erklärte Sven Wolfermann in seiner Session SVG – weniger Pixel, mehr Spaß auf der aktuell stattfindenden International PHP Conference 2015 und Webinale.

Warum eigentlich SVGs?

Das SVG-Grafikformat gibt es eigentlich bereits seit 1999, aber erst seit einiger Zeit findet es immer größere Verbreitung – was vor allem auch daran liegt, dass erst jetzt die meisten Browser SVGs unterstützen. Auch dass es immer mehr Devices mit hochauflösenden Displays am Markt gibt, trägt zur wachsenden Beliebtheit des Grafikformats bei und sorgt dafür, dass es seine eigentlichen Stärken voll ausspielen kann.

Und diese Stärken sind durchaus vielfältig. Gerade bei der Erstellung von Logos, mehrfarbigen Icons und großflächigen Grafiken profitieren Webdesigner von der Nutzung von SVGs, und auch die Möglichkeit, sie mit Animationen und Transitions aufzuwerten, machen SVGs zu einem nützlichen Hilfsmittel im Webdesign.

So sind sie nicht nur skalierbar, sondern verlieren auch nicht an Qualität, wenn ihre Größe verändet wird. Zudem sind sie Printer-friendly und lassen sich problemlos mit gzip komprimieren. Intern bieten SVGs HTML-ähnliche Elemente, auf die CSS und JavaScript angewandt werden kann – etwa für das Hinzufügen von Animationen. Doch auch von Haus bringen SVGs bereits zahlreiche Animations- und Filtermöglichkeiten mit sich; genauso bieten sie bereits gute Accessibility- und SEO-Möglichkeiten.

Eingebunden werden SVGs zum Beispiel als Bild, Object oder iFrame, doch auch die Einbettung als Hintergrundbild mit CSS sowie eine inline Einbettung mit HTML5 ist möglich.

SVGs statt Icon-Fonts?

Was SVGs und Icon-Fonts gemeinsam haben, ist vor allem der Haupt-Use-Case: Icons und Logos. Allerdings sorgen Icon-Fonts oft für Probleme, weil sie zuweilen im Browser nicht geladen werden können und gehörig auf die Performance drücken – gerade, wenn man ein komplettes Set heruntergeladen hat. Auch bei der Gestaltung von mehrfarbigen Icons stößt man mit Icon-Fonts schnell an seine Grenzen; SVGs haben hier eindeutige Vorteile.

So kann man bei SVGs nicht nur einzelne Flächen oder Teilflächen farbig füllen, sondern etwa auch nur den Rahmen; zudem lässt sich das Aussehen weiter definieren. Auch hier kommen einmal mehr die Möglichkeiten, CSS auf SVGs anzuwenden zum Tragen. Natürlich lassen sich SVGs auch responsiv gestalten; darüberhinaus stellte Sven Wolfermann noch viele weitere Beispiele wie das Erstellen von responsiven Karten, die verschiedenen Möglichkeiten zur Nutzung von SVG-Sprites und die Nutzung der eingebauten SVG-Animationsmöglichkeit SMIL vor.

So wird vor allem eins deutlich: SVGs vereinfachen die Handhabung von Grafiken in Websites deutlich – und sorgen gleichzeitig für eine bessere Performance. Angesichts dieser Vorteile ist es kein Wunder, wenn Sven Wolferman glaubt: