Das Format Scalable Vector Graphics (SVG) ist ein Web-freundliches Vektorformat. Anders als pixelbasierte Rastergrafiken wie JPEG handelt es sich bei Vektorgrafiken um mathematisch definierte Bilder, die sich aus Punkten und Linien in einem Raster zusammensetzen. Vektordateien wie SVG lassen sich deshalb ohne Qualitätsverlust skalieren. Das macht sie ideal für Logos und komplexe Online-Grafiken.
Das SVG-Format ist bei Web-Designerinnen und -Designern aber nicht nur aufgrund seiner Skalierbarkeit beliebt. SVG-Dateien sind in XML geschrieben. In XML werden Textinformationen als tatsächlicher Text gespeichert, und nicht als Formen. Suchmaschinen wie Google können somit SVG-Grafiken anhand ihrer Stichwörter (Keywords) erkennen, was sich für das Ranking einer Website in den Suchergebnissen nutzen lässt.
Eine SVG-Datei ist an ihrer Erweiterung „SVG“ erkennbar.
Das Scalable Vector Graphics-Format wurde in den letzten Jahren immer beliebter. Aber in welchen Bereichen wird es in der Praxis eingesetzt?
Icons und Logos für Websites.
Designerinnen und Designer setzen SVG oft für die Darstellung von Icons oder Symbolen auf Websites ein, z. B. für Buttons oder Firmen-Logos. Da sich SVG ohne Qualitätsverlust vergrößern oder verkleinern lässt, ist dieses Format ideal für Grafiken, die an verschiedenen Stellen in unterschiedlicher Größe erscheinen sollen.
Infografiken und Illustrationen.
Da SVG-Dateien in XML geschrieben sind, können Suchmaschinen wie Google textlastige Diagramme und Grafiken lesen und auch die in den Grafiken enthaltenen Stichwörter (Keywords) erkennen. Neben den Möglichkeiten für die Suchmaschinenoptimierung bietet SVG zudem noch Unterstützung für Animation, was das Format noch interessanter für Web-Designerinnen und -Designer macht.
Weitere Vektorformate entdecken
Das SVG-Dateiformat ist nicht auf statische Bilder beschränkt. Im Web stehen viele Tools zur Verfügung, mit denen du deine Web-Grafiken in Bewegung bringen kannst. SVG-Animationen können aus relativ einfachen Elementen bestehen, beispielsweise einen Regler zur Navigation in einer Infografik. Du kannst auch Illustrationen animieren, z. B. die Zeiger auf dem Ziffernblatt einer Uhr.
Eine SVG-Datei erkennst du am schnellsten an ihrer Dateierweiterung „SVG“. Eine andere Möglichkeit, Vektorgrafiken wie SVG als solche zu identifizieren, besteht darin, das Bild auf dem Computerbildschirm auf 200 % vergrößern. Vektorgrafiken bleiben immer gestochen scharf, und die Farben verschwimmen nicht.
Obwohl SVG-Dateien hauptsächlich im Web verwendet werden, gibt es auch noch andere Einsatzbereiche. Zum Beispiel werden SVG-Dateien als Vorlagen im Textildruck eingesetzt, weil sie bei Änderungen der ursprünglichen Maße nicht verzerrt werden. Eine JPEG-Datei, die aus Pixeln besteht, ließe sich nicht so sauber übertragen.
Die Größe einer SVG-Datei hängt von der Menge der enthaltenen Bildinformationen ab, ist in der Regel aber kleiner als bei anderen Dateiformaten. Komplexe Grafiken mit zahlreichen Pfaden und Ankerpunkten nehmen mehr Speicherplatz in Anspruch als einfachere, schlichtere Designs. Deshalb solltest du versuchen, die Anzahl komplexer Anweisungen innerhalb deiner Datei zu minimieren.
Kurz gesagt, SVG-Dateien sind Vektordateien, und PNG-Dateien sind Rasterdateien. Ein PNG-Bild wird verpixelt oder verschwommen dargestellt, wenn es zu stark vergrößert oder verkleinert wird. Die Auflösung einer SVG-Datei bleibt immer gleich, weil sie keine Pixel enthält. Ein weiterer Unterschied ist, dass PNG keine Animationen unterstützt.
