Grafiken-für’s-Web-Alleskönner: Warum du SVGs einsetzen solltest

10. April 2015 von Sebastian Maier

SVG-Grafiken sind das ideale Format fürs Web

Mit der Spezifikation SVG (Scalable Vector Graphics) lassen sich zweidimensionale Vektorgrafiken ohne Qualitätsverluste auf den schmalsten Smartphone-Screens und den breitesten Großbildschirmen anzeigen. Auch auf Retina-Displays werden SVG-Grafiken gestochen scharf dargestellt. Dies funktioniert, weil SVGs – im Gegensatz zu Rastergrafiken wie Bildern oder Fotos – nicht aus Pixeln bestehen, sondern mathematisch berechnet werden.

Beim Vergleich einer “normalen” Bilddatei mit einer SVG-Grafik wird der Unterschied schnell deutlich:

Der Vergleich zwischen einer normalen Bilddatei und einer SVG-Grafik

Bildnachweis: Flickr/Sean MacEntee, Lizenz: CC BY 2.0


Ein weiterer Vorteil von SVG-Grafiken: Da es sich dabei um vergleichsweise kleine Dateien handelt, wird durch sie die Ladegeschwindigkeit einer Website positiv beeinflusst. 

An sich sind SVG-Grafiken übrigens nichts Neues. Doch mit der immer größeren Verbreitung von Responsive Design erlebten sie eine Art Renaissance, da ihre Stärken vor allem in den Ladevorteilen und der Skalierbarkeit liegen. Daher sind SVGs für modernes Webdesign fast schon ein Muss – und eine äußerst komfortable “Arbeitserleichterung”.


Einsatzzwecke von SVG-Grafiken

Die Einsatzmöglichkeiten von SVG-Grafiken sind vielfältig. Man kann sie zur Erstellung von Logos, von Grafiken, oder – in Verbindung mit Animationen – von Flash nutzen. Auch sind mit ihnen ausgefallene grafische “Spielereien” möglich, wie beispielsweise das Füllen von Text mit Grafiken oder Bildern, wie in diesem Beispiel:

Ein Beispiel, wie die Website von Piet Oudolf Grafiken nutzt um den Text zu füllen

Bildnachweis: oudolf.com


Zudem lassen sich viele Effekte wie beispielsweise eine ausgestanzte Schrift, die mit CSS nicht möglich sind, mit SVG umsetzen.

Bisher gab es bei SVG-Grafiken wie bei jedem anderen Bild jedoch das Problem, dass sie von Google für die Suchmaschinenoptimierung nur durch eine dazugehörige Textbeschreibung gelesen werden konnten. Dies kann umgangen werden, indem die SVG-Dateien nicht vektorisiert, sondern als Text eingebunden werden. Aber Achtung, mit einer einzigen SVG-Datei als Website ist keinerlei mobile Optimierung möglich – dies ist also für die heutigen Webanforderungen keine Lösung mehr.

Wenn eine besondere Font in den SVGs verwendet und diese auch von Google indiziert werden soll, muss sie als Webfont integriert werden. Dazu muss die entsprechende Schrift natürlich auch als Webfont verfügbar sein. Manche Fonts, beispielsweise Hausschriften von älteren Unternehmen, sind nicht fürs Web geeignet. Dann sind SVGs auch keine Alternative, da man diese älteren Fonts dann höchstens vektorisieren und damit auch wieder “nur” als Grafik einbauen könnte.

Wie man beispielsweise per Adobe Illustrator an den Code von SVG-Grafiken kommt, wird hier beschrieben.


Browserkompatibilität

Ältere Browser unterstützen keine SVG-Grafiken. Für diese braucht man dann eine andere Lösung, damit der Inhalt der Vektorgrafik entsprechend angezeigt wird – beispielsweise mit einem JavaScript. Hierdurch wird dann die SVG-Grafik in ein PNG oder einen HTML Canvas umgewandelt.

Die folgenden Browser unterstützen SVG: Google Chrome ab Version 4; IE ab Version 9; Mozilla Firefox ab Version 3; Safari ab Version 3.2; Opera ab Version 10.1.

Bei der mobilen Optimierung ist zu beachten, dass der Android-Browser 2.3 und kleiner SVG-Grafiken nicht unterstützt.

Damit ihr wisst, für welche Browser ihr die Kompatibilität gewährleisten solltet – das sind die meist verwendeten Browser weltweit und in Deutschland, gemessen von März 2014 bis März 2015: 


Weltweit

Grafik zu den die meist verwendeten Browsern weltweit (März 2014 bis März 2015)

Quelle: statscounter.com


Deutschland

Grafik zu den die meist verwendeten Browsern in Deutschland (März 2014 bis März 2015)

Quelle: STATSCOUNTER.COM



Nutzt ihr SVG-Grafiken beim Designen fürs Web? Was sind eure Erfahrungen?



(Headerbild: Foto von Wolfgang Lonien, flickr.com/Creative Common Licence)

zurück
comments powered by Disqus