Januar 2016 – SVG – So Viel Grafik?

By Yug, modifications by 3247 (Unknown) [CC BY-SA 2.5 (https://creativecommons.org/licenses/by-sa/2.5)], via Wikimedia Commons

SVG – So Viel Grafik?

Die Handhabung von Bildern im Internet ist permanent ein Thema. Viele Faktoren spielen hier eine Rolle. Um nur einige davon zu nennen:

  • Dateiformat
  • Dateigrösse
  • Abmessungen
  • Manipulierbarkeit (z.B. via CSS)
  • Darstellungsqualität (z.B. auf Retina Displays)

Die vermutlich am weitesten verbreiteten Formate sind .jpg, .png und .gif. Doch es gibt ein weiteres Format, welches gerade auf Websites seine durchaus gewichtigen Vorteile ausspielen kann: .svg. Die sogenannten SVGs (SVG steht für Scalable Vector Graphics) bieten einiges an Möglichkeiten, um eine optimale Darstellung im Web zu gewährleisten.

Den meisten dürfte SVG aus dem Adobe Illustrator bekannt sein, welcher dieses Format hauptsächlich verwendet.

Doch was sind die Vorteile von SVG?

Zunächst eine kurze Erklärung zur Funktionsweise:
SVG ist XML-basiert, und somit zur Ausgabe auf Computersystemen bestens geeignet. Vektorgrafiken basieren quasi auf Bildbeschreibungen, welche die Objekte, aus denen ein Bild zusammengesetzt ist, beschreiben. Das bedeutet gleichzeitig, dass SVG eher für Grafiken von geringerer Komplexität eingesetzt wird – das Teamfoto auf der Website würde mit SVG keinen Sinn machen.

Um beispielsweise einen Kreis darzustellen, werden mindestens der Kreismittelpunkt und der Kreisdurchmesser benötigt. Auf Grundlage dieser Informationen kann dann das Bild dargestellt werden. Hier kommt auch einer der grössten Vorteile von SVG ins Spiel: der Kreis lässt sich mithilfe dieser Parameter stufenlos skalieren – somit lassen sich Bilder optimal für die verwendete Displaygrösse anpassen.  JPG, GIF und PNG sind rasterbasierte Grafikformate, die aus einem fixen Set an Pixeln bestehen, während SVG aus einem fixen Set an Formen besteht. Daher werden bei der Aufskalierung von Rastergrafiken die Pixel sichtbar, während SVGs stufenlos skalieren.

Angenehmer Nebeneffekt dieses Aufbaus: Dank der wenigen benötigten Bildinformationen können SVGs sehr platzsparend sein, was den Server entlastet, die Datenverbindung entschlackt, und allgemein Ressourcen spart.

Zudem lassen sich via SVG auch weitere Details der Grafik bestimmen, so z.B. die Strichstärke oder die Farbe. Hier kommt dann gleich der nächste Vorteil ins Spiel: Mit SVG lassen sich die Grafiken anhand von CSS manipulieren. Dadurch gewinnt man sehr viel Gestaltungsfreiheit über das Bild, und kann z.B. Effekte darauf anwenden oder Farben ändern.

Auch Animationen sind mit SVG möglich. Tatsächlich wurde SVG früh als potentieller Nachfolger von Flash (ebenfalls vektorbasiert) ins Gespräch gebracht, da es im Gegensatz zum proprietären Flash quelloffen ist. Es bietet zudem einige weitere Vorteile gegenüber Flash, welche sich für alle Interessierten hier nachlesen lassen.

Ein Beispiel für eine SVG Animation finden Sie unter diesem Link. Dort kann man sehr gut sehen, dass SVG animationstechnisch keine Wünsche offen lässt, und sehr viel Freiraum zur Gestaltung ermöglicht.

Zudem gibt es heutzutage umfangreiche JavaScript Libraries für SVG Grafiken, welche die Manipulation der Grafiken erheblich erleichtern, und die Erzeugung von eindrücklichen Effekten auf Ihrer Website ermöglichen. Ein Beispiel hierfür wäre die Library snap.svg, welche auf moderne Browser optimiert ist, und damit mehr Manipulationsmöglichkeiten bietet, als ältere Libraries, welche eher auf breit angelegte Abwärtskompatibilität ausgerichtet sind.

Damit wären wir auch beim einzigen wirklich nennenswerten Nachteil von SVG Grafiken: die Abwärtskompatibilität bei Browsern und Betriebssystemen. Allerdings ist dieser Faktor bei einer Kompatibilität mit Internet Explorer ab Version 9 und der Unterstützung durch alle anderen modernen Browser nur für Projekte relevant, die auf eine Kompatibilität mit ohnehin mehr oder minder obsoleten Systemen ausgelegt sind.

Prinzipiell spricht also kaum etwas gegen die Verwendung von SVG Dateien im Internet. Falls Sie weitere Informationen benötigen, oder bei einem Webprojekt mit SVG arbeiten möchten: Kontaktieren Sie uns!