SVG Files sind „scalable vector graphics“, also Grafiken, die nicht in Pixelform vorliegen, wie etwa ein GIF oder JPEG, sondern die einfach ausgedrückt „gezeichnet“ werden.
Dazu ist nicht mehr nötig, als die Koordinaten des Startpunktes und des Endpunktes, sowie ein Füllfarbe und eine Strichstärke und schon hat man eine Strecke gezeichnet.
Genauso funktioniert es mit Rechtecken, Kreisen, Ellipsen und allen anderen geometrischen Formen, die beliebig transformiert und kombiniert werden können.
Vorteile von SVG Files
Wozu also SVG? Dafür gibt es eine Reihe sehr triftiger Gründe:
- SVG Files sind per JavaScript im Browser manipulierbar.
Sperrige GIFs oder inkompatibles Flash für die Erzeugung von Animationen gehören damit der Vergangenheit an. Da SVGs im XML Format, also in strukturierter Textform beschrieben werden, kann diese Beschreibung dynamisch geändert werden.
- SVG ist skalierbar
Wie der Name schon sagt ist aufgrund der Vektorbeschreibung der Grafik diese nicht an eine bestimmte Größe gebunden. Während Pixelgrafiken für eine anständige Qualität in eben der Größe vorliegen sollten, in der sie im Browser dargestellt werden, spielt es für SVG die Ausgabegröße keine Rolle. Das erleichtert nicht nur das Webdesign, sondern auch das Einbinden von Grafiken für verschiedene Medien, z.B. kleine Smartphonescrrens bis hin zum Ausdruck mit 300ppi
- SVGs sind klein
Bei Pixelgrafiken muss jeder Pixel beschrieben werden; ein SVG begnügt sich mit geometrischen Angaben, die sehr viel kürzer sind.
- SVG ist ein offener Standard und W3C Empfehlung
Im Gegensatz zu Flash ist SVG ein offener Standard der ohne Beschränkung für jeden Nutzbar ist. Zudem ist SVG bereits seit 2001 „recommended“ von der W3C
- SVG gehört die Zukunft
Spätestens mit dem Erscheinen des Internet Explorers 9, der nun endlich auch weitreichende Unterstützung für SVGs bietet, steht dem Einsatz dieser Grafiken nichts mehr im Wege und wird sich aufgrund der geschilderten Vorteile zunehmend durchsetzen.
Nützliche Ressourcen rund um SVG Files
svg Patterns: Genial: Aus einer von zahlreichen schönen SVG Hintergrundgrafiken wählen, danach „get code“ clicken und diese einfach im Editor nach eigenen Wünschen anpassen. Ein integriertes JS erzeugt dann aus dem HTML SVG ein base64 encodiertes image, das man ganz einfach als Hintergrundgrafik verwenden kann.
SVGtoXML: SVG Converter