Ein Weg, um Unterschieden bei Bildgrößen für verschiedene Devices im RWD zu begegnen, sind SVG Grafiken. Was SVGs sind, wie sie funktionieren und was man bei der Verwendung beachten sollte, versuchen wir hier zu erklären.
Unterschiedliche Bildgrößen – Ein Grundproblem im Responsive Webdesign
Die Fläche eines Retina-Displays ist um bis zu 2500% größer als die eines kleinen Smartphones. Entsprechend unterschiedlich groß können benötigte Bilder und Grafiken sein.
Einfache Skalierung löst das Problem offensichtlich nicht, weil auf mobilen Geräten nicht genug Bandbreite zur Verfügung steht, um die für Desktopdarstellung benötigten Bilder zu laden.
Eine Lösung: Vektorgrafiken
Im Gegensatz zu Pixelgrafiken wie JPG, PNG oder GIF sind Vektorgrafiken beliebig skalierbar, weil sie aus Pfaden und Kurven bestehen, die erst im Browser gerendert werden. Also bleibt die Dateigröße immer gleich, egal, wie groß eine Grafik dargestellt wird.
Das Standard Vektorformat online: SVG Grafiken
Scalable Vector Graphics (SVG) wurde im September 2001 veröffentlicht. Heute ist das auf XML basierende SVG Format die vom World Wide Web Consortium (W3C) empfohlene Spezifikation zur Beschreibung zweidimensionaler Vektorgrafiken. Alle modernen Browser unterstützen SVG. Von den meisten Browser Engines werden 85 bis 95 % des Sprachumfangs unterstützt. Für ältere Browser (z.B. MSIE < 8) werden Plugins angeboten, die die Darstellung ermöglichen. Ohne Plugins können z.B. über Javascript und Flash Alternativen angezeigt werden.
Die Perfekte Lösung für alles außer Fotos
Alles, was sich aus Linien, Formen und Farben konstruieren lässt, lässt sich mit SVGs darstellen. Besonders gut geeignet ist das Format für Logos, die immer häufiger verwendeten Infografiken und Icons. Hier ist der entscheidende Vorteil gegenüber den momentan häufig verwendeten Iconfonts die mögliche Mehrfarbigkeit von SVG-Grafiken. Wie wir später erwähnen, lassen sich die Farben sogar dynamisch verändern.
Aber SVG kann viel mehr als Bilder
Zunächst einmal unterstützt SVG alle möglichen grafischen Formen und Eigenschaften. Auch komplexe Grafiken lassen sich problemlos umsetzen. Eigenschaften lassen sich auf jedes einzelne Element, aber auch auf Gruppen von Elementen anwenden.
Die Eigenschaften im einzelnen:
• Geraden, Kurven, geometrische und freie Formen, Schrift
• Linienfarben und Linienstärken
• Farbfüllungen und Verläufe
• Einbetten von Bildern (PNG, JPG etc.)
• Transparenz, Schatten, Unschärfe
• Gruppierung von Elementen innerhalb eines SVG
Und, alle Elemente einer SVG Grafik lassen sich zur Laufzeit modifizieren. Prinzipiell können ganze Grafiken sogar zur Laufzeit erzeugt werden. Der Funktionsumfang ähnelt Flash. Also lassen sich die Elemente auch animieren.
• Bewegung, Rotation, Skalierung
• Ein- und Ausblenden, Transparenz
• Animationen mit Zeitangaben
• Reaktion auf Benutzereingaben
Editoren für SVGs: Eine breite Palette
Es gibt mittlerweile eine Vielzahl an Programmen, mit denen sich SVGs erstellen oder editieren lassen. Angefangen natürlich bei den großen kommerziellen Zeichenprogrammen, wie Adobe Illustrator bis hin zu verschiedener kostenloser Software und Online-Tools. Im Anhang findet ihr eine Liste, die wir Wikipedia http://de.wikipedia.org/wiki/Scalable_Vector_Graphics#Editoren entnommen haben.
Nachteil: zum Teil fehlende Kompatibilität
Moderne Browser unterstützen SVGs natürlich. Aber als Webentwickler muss man eben auch auf ältere Versionen Rücksicht nehmen. Das Sorgenkind heißt wie so oft bei modernen Technologien Internet Explorer. Bis zum IE 8 gibt es überhaupt keine Unterstützung für SVGs. Der IE 9 unterstützt SVGs, aber nur mit eingeschränktem Funktionsumfang.
Plugins sind keine Lösung
Natürlich gibt es für viele ältere Browser Plugins, die SVGs darstellen. Aber man kann die Nutzer nicht zwingen, diese zu installieren. Das ist also keine Lösung. Zum Glück gibt es inzwischen Alternativen.
PNGs als Fallback für einfache Grafiken
Mittlerweile gibt es verschiedene Lösungen, um auch ohne Insatallation von Plugins in älteren Browsern zumindest etwas anzuzeigen, wenn SVG nicht unterstützt wird. Geht es nur um die Darstellung einer Grafik, sind Ersatzbilder, z.B. im PNG Format, geeignet. Die Javascript Bibliothek Modernizr leistet hier gute Dienste. Ihr müsst nur entsprechende Fallback PNGs hinterlegen. Mit jQuery geht es noch einfacher. Das jQuery-Plugin SVG Magic prüft, ob der Browser SVG versteht, sendet, wenn nicht, die Grafik direkt an einen Server, der die Datei dynamisch in ein PNG konvertiert, und lädt dann das generierte Bild.
Fallbacklösungen für SVG Animationen
Für komplexere Dinge wie Animationen gibt es Fallback-Lösungen, die z.B. auf Flash basieren. Diese funktionieren gut. Aber natürlich setzt die Verwendung von Flash ebenfalls ein installiertes Plugin voraus.
Fazit
SVGs sind ein in Zukunft unverzichtbares Stilmittel für modernes Webdesign. Momentan benötigt man, z.B. für den IE 8 noch Alternativlösungen, will man seine Inhalte wirklich allen Nutzern zugänglich machen. Der Marktanteil des IE 8 liegt allerdings bereits heute unter 3%. In spätestens ein bis zwei Jahren, ist es mit solchen Einschränkungen vorbei.
Die Möglichkeiten von SVG sind riesig. Es ist auf jeden Fall sinnvoll, sich besser heute als morgen mit der Technik auseinanderzusetzen.
Weiterführende Links:
• Alles über SVGs in WIKIPEDIA
http://de.wikipedia.org/wiki/Scalable_Vector_Graphics
• Aktueller Support verschiedener Browser für SVG:
http://caniuse.com/#feat=svg
• Artikel auf blog.kulturbanause über SVG mit PNG Fallback:
http://blog.kulturbanause.de/2013/09/svg-mit-png-fallback/
• drweb.de über Adobe snap.svg für SVG Animationen:
http://www.drweb.de/magazin/adobes-snap-svg-animationen-mit-html-5-und-ohne-flash-46612/
• Tutorial zu SVG-Animation:
http://www.mediaevent.de/tutorial/svg-animate.html
Librarys für SVG-Support für ältere Browser:
• https://code.google.com/p/svgweb/
• http://www.amplesdk.com/
• http://modernizr.com/
• https://dirkgroenen.github.io/SVGMagic/index.html (JQUERY Plugin)
SVG Editoren:
• Adobe Illustrator (proprietär; Windows, Mac OS)
• CorelDRAW (proprietär; Windows)
• Inkscape – Grafik- und Zeichenprogramm (freie Software; Linux/Unix, Windows, Mac OS X; verwendet SVG als natives Fileformat (mit Inkscape Erweiterungen))
• Apache OpenOffice – Nativer Import und Export mit Einschränkungen (freies Office-Paket)
• PhotoLine (proprietär; Windows, Mac OS)
• sK1 – Graphics und Druckvorstufe (freie Software; Linux/Unix)
• Scribus (freie Software; Unix, Linux, Mac OS X, OS/2, Windows)
• Xara Designer Pro – Grafik- und Zeichenprogramm (proprietär für Windows)
• SVGConv – Online-Konverter, mit dem SVG-Dateien in andere Formate (JPEG, PNG, GIF, BMP, PDF, PS usw.) umgewandelt werden können
• Go2convert – Online-Konverter, mit dem SVG-Dateien in andere Formate umgewandelt werden können
• Microsoft Visio (proprietär; Windows)
• Omnigraffle (proprietär; Mac OS)