Eine SVG-Datei ist eine Grafikdatei. Sie enthält Bilder in einem Textformat, das auf XML basiert. Das heißt: Eine SVG-Datei besteht nicht aus Pixeln, sondern aus einer mathematischen Beschreibung von Objekten.
Bilder, gemacht aus Texten? Wie kann das sein? Eigentlich ganz einfach: Im einfachsten Falle funktioniert das so, dass im Text Anweisungen enthalten sind, die eine geometrische Figur beschreiben – zum Beispiel “Zeichne einen Kreis mit Mittelpunkt X und Radius Y“. Mehr dazu weiter unten.
Was ist eine SVG-Datei?
Eine SVG-Datei ist also eine durch Text beschriebene Grafik. Der Clou dabei: Weil alle Bildinformationen als Beschreibung vorliegen, können Programme solche “Bilder” beliebig vergrößern und verkleinern, und zwar komplett ohne Qualitätsverlust.
Man nennt solche Grafiken auch Vektorgrafiken, was daran liegt, dass die Elemente eben unter anderem durch Vektoren beschrieben sind. Die Abkürzung SVG steht denn auch für Scalable Vector Graphics, zu deutsch: skalierbare Vektorgrafik.
Vorteile im Vergleich zu Rastergrafiken
Bei Rasterformaten wie PNG und JPG ist dies leider nicht der Fall. An einem bestimmten Punkt erscheinen die Kanten bei Pixelgrafiken ausgefranst und pixelig, was bedeutet, dass Kanten sichtbar werden.
Solche Pixel- oder Rastergrafiken können Sie nicht hochskalieren, ohne wertvolle Bildqualität zu verlieren. Der Hauptvorteil einer SVG-Datei ist also die beliebige Skalierbarkeit.
Es gibt aber noch einen weiteren Vorteil: Aufgrund der meist einfachen Formen bleibt die Dateigröße gering – SVG-Dateien sparen also oft auch schlicht Speicherplatz.
Hier ein Beispiel, wie sich Vektor- und Rastergrafiken (=Pixelgrafiken oder Bitmap) beim Hereinzoomen verhalten:
Nachteile im Vergleich zu Rastergrafiken
Die Nachteile liegen auf der Hand: Da jedes Objekt einer Vektorgrafik einzeln beschrieben werden muss, sind detailreiche Grafiken zwar möglich – diese erzeugen aber einerseits eine enorme Rechenlast beim Bearbeiten und führen andererseits zu sehr großen Dateien.
Sie können dies einfach prüfen, indem Sie ein (pixelbasiertes) Foto vektorisieren. Die Zahl der Bildpunkte und Vektoren ist je nach Ausgangsbild teils enorm hoch, die Dateigröße ebenso.
Anwendungsgebiete einer SVG-Datei
Aufgrund ihrer Eigenschaften sind SVG-Dateien prädestiniert für eine Reihe von Anwendungsfällen. Hier die wichtigsten:
Logos
Firmenlogos werden fast immer als Vektordatei entworfen. So sind diese problemlos skalierbar und bleiben in ihrer Größe kompakt.
Diagramme
SVGs eignen sich perfekt für Diagramme und alle anderen Arten von Illustrationen, die auf einfachen Linien beruhen. Benchmarks, Charts etc. können Sie kompakter und hochwertiger kaum “verpacken”.
Animierte Elemente
Mit CSS können Sie SVG-Dateien auch animieren. Einen schönen Mini-Workshop dazu gibt es bei Mediaevent.
Wie SVG-Datei öffnen?
Der einfachste und schnellste Weg, eine SVG-Datei zu öffnen, um sie anzuzeigen, aber nicht zu bearbeiten, ist mit einem modernen Webbrowser wie Chrome, Firefox, Edge oder Internet Explorer. Diese unterstützen fast alle das SVG-Rendering. Viele Windows-Versionen öffnen SVG-Dateien bereits automatisch mit dem Edge-Browser.
Ursprung der SVG-Grafiken
SVG-Dateien wurden als Standardformat für die Anzeige von Vektorgrafiken im Web entwickelt. Das SVG-Format ist ein offener Standard, der im Rahmen des W3C (World Wide Web Consortium) entwickelt wurde, wobei Adobe eine wichtige Rolle spielt.
SVG-Bilder können daher auch aus Adobe Creative Suite-Programmen wie Illustrator und GoLive erstellt und direkt exportiert werden.
Die bekannteste kostenlose Alternative zu Illustrator heißt Inkscape und ist für Windows, macOS und Linux verfügbar.
Daneben können auch nahezu alle gängigen Vektorprogramme mit SVG-Dateien umgehen. Zu den bekanntesten gehören Corel Draw, Affinity Designer oder Microsoft Visio
Last but not least zeigen viele Bildbetrachter wie Irfanview oder Xnview MP SVG-Dateien an. Manchmal muss man aber ein separates Plug-in zur Anzeige herunterladen.
Sie können SVG-Dateien auch mit jedem Texteditor öffnen, dazu gleich mehr. In der Regel ist das aber nicht sinnvoll, da man ja die Vektorgrafik sehen möchte.
Liste der Programme, die SVG-Dateien öffnen
Hier eine Liste von Programmen, welche Vektorgrafiken öffnen und bearbeiten können. Die Liste ist alphabetisch sortiert.
- Adobe Indesign
- Adobe Illustrator
- Adobe Photoshop
- Corel Draw
- GIMP
- Inkscape
- Irfanview (mit Plug-in)
- LibreOffice
- Microsoft Visio
- OpenOffice.org
- Serif Affinity Designer
- Serif Affinity Publisher
- Serif Affinity Photo
- Xnview MP
- zusätzlich jeder Browser (nur anzeigen)
- zusätzlich jeder Texteditor (nur Code)
Eine SVG-Datei im Detail
Wie zu Beginn erwähnt, enthalten SVG-Dateien Anweisungen, die eine Form oder Figur genau beschreiben.
Die Anweisungen sind ähnlich einer XML-Beschreibung oder Programmiersprache in einzelne Tags unterteilt, daher können Sie SVG-Dateien auch mit jedem beliebigen Texteditor öffnen und die Anweisungen einsehen und manipulieren.
Doch wie genau sehen solche Anweisungen aus? Hier ein Beispiel:
Die oben abgebildeten Befehle erzeugen das folgende Bild. Als Beispiel sei der orangefarbene Kreis genannt, der durch die folgende Zeile
<circle cx="125" cy="125" r="75" fill="orange" />erzeugt wird.
(Pixel-/Raster-/Bitmap-)Grafiken in eine SVG-Datei konvertieren
Wenn Sie eine pixelbasierte Datei haben, also zum Beispiel ein JPG, PNG oder GIF, dann können Sie diese grundsätzlich auch in eine SVG-Datei umwandeln.
Das Problem dabei: Je nach Vorlage schwankt das Resultat zwischen “beachtlich” und “unbrauchbar”. Der Grund ist, dass es sinnlos wäre, jeden Pixel einzeln in einen Vektor umzuwandeln – denn dafür gibt es ja Pixelformate.
Also versucht die Software, Muster in den Pixeln zu erkennen und in Vektoren zu transfomieren. Dies klappt bei einem Himmel mit Wolken noch ganz gut, endet beim schwarzen Labrador-Welpen aber im Fiasko.
Immerhin – einen Versuch ist es wert, denn es gibt eine Reihe von kostenlosen Online-Vektorisierungs-Tools. Faustregel dabei: Je größer die Vorlagendatei, desto besser das Ergebnis.
Online-Vektorisierungs-Tools
Die folgenden Dienste können Grafiken und Bilder direkt online in eine SVG-Datei konvertieren
- Vectorizer.io (kostenpflichtig)
- Autotracer.org
- Vectorization.org
- Pngtosvg.com
Übrigens: Auch viele der oben erwähnten Programme haben Funktionen, mit denen Pixelgrafiken vektorisiert werden können.
Wissenswertes zu SVG-Dateien
Trotz des Alters (die Ursprünge reichen bis in die Anfangszeit der Computer in den 1960er-Jahren zurück) sind SVG-Dateien bestens für Web-Grafiken geeignet. Aufgrund der Beschreibung durch einfachen Text sind kompakte Dateien möglich, auch bei CSS-Sprites spielen SVG-Grafiken eine Rolle.
Einige Computerspiele nutzen SVGs zum Speichern von Spielständen. Zu den wohl bekanntesten gehört GTA2. Wegen der Textnatur lassen sich solche Dateien auch einfach wie am Anfang beschrieben mit jedem Texteditor öffnen.
Bildquelle: bongkarn thanyakij / Pexels, Michael L. / Pexels // The original uploader was Darth Stabro at English Wikipedia., CC BY-SA 3.0 http://creativecommons.org/licenses/by-sa/3.0/, via Wikimedia Commons
Tipp meinen Favoriten hinzufügen (setzt Cookie, mehr unter Datenschutz)