Was ist SVG? Ein Leitfaden für Anfänger

Published: August 2026

SVG steht für Scalable Vector Graphics (Skalierbare Vektorgrafik). Es ist ein Bildformat, das verwendet wird, um Grafiken mit Formen, Linien, Kurven und anderen grafischen Anweisungen darzustellen, anstatt sich nur auf ein festes Pixelraster zu verlassen.

Da SVG-Grafiken mit Vektorinformationen beschrieben werden, können sie normalerweise viel größer oder kleiner gemacht werden, ohne unscharf oder verpixelt zu werden. SVG basiert außerdem auf XML, was bedeutet, dass die Informationen, die zur Erstellung der Grafik verwendet werden, als Text gespeichert werden, den Computer und Browser interpretieren können.

Dies macht SVG besonders nützlich für Logos, Icons, Illustrationen, Diagramme und andere Grafiken, die in verschiedenen Größen scharf bleiben müssen.

Aber es gibt einen wichtigen Unterschied:

Das Einfügen eines Bildes in eine SVG-Datei macht dieses Bild nicht zwangsläufig zu einem echten Vektor.

Wenn Sie ein PNG oder JPG in SVG konvertieren, muss das ursprüngliche pixelbasierte Bild normalerweise vektorisiert werden, damit seine sichtbaren Merkmale als Vektorformen und -pfade neu erstellt werden.

Lassen Sie uns aufschlüsseln, was das bedeutet.

Wofür steht SVG?

SVG = Scalable Vector Graphics.

Jeder Teil des Namens beschreibt ein wichtiges Merkmal des Formats:

Scalable (Skalierbar) bedeutet, dass die Grafik ihre Größe ändern kann, ohne an eine feste Pixelauflösung gebunden zu sein.
Vector (Vektor) bedeutet, dass die Grafik durch Pfade, Formen, Koordinaten und Kurven anstatt nur durch Pixel dargestellt werden kann.
Graphics (Grafik) bezieht sich einfach auf den visuellen Inhalt, der angezeigt wird.

SVG wurde als offener Webstandard vom World Wide Web Consortium (W3C) entwickelt und basiert auf XML. Das Format ist für zweidimensionale Grafiken konzipiert und kann mit Webtechnologien wie CSS und JavaScript zusammenarbeiten.

Eine typische SVG-Datei endet mit: .svg

Zum Beispiel: logo.svg, icon.svg, illustration.svg

Wie funktioniert eine SVG-Datei?

Um SVG zu verstehen, ist es hilfreich, es mit einem normalen Foto zu vergleichen.

Ein JPG oder PNG speichert ein Bild normalerweise mithilfe eines Rasters winziger farbiger Quadrate, sogenannter Pixel.

Ein SVG kann stattdessen Anweisungen beschreiben, wie z. B.:

zeichne hier einen Kreis;
erstelle eine Linie zwischen diesen Punkten;
fülle diese Form mit Blau;
gib diesem Pfad einen schwarzen Umriss;
zeichne eine Kurve zwischen diesen Koordinaten.

Der Browser oder das Grafikprogramm liest diese Anweisungen und rendert das Bild.

Ein sehr einfacher SVG-Kreis könnte folgendes Markup enthalten:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

Anstatt ein Foto eines blauen Kreises Pixel für Pixel zu speichern, beschreibt die Datei im Wesentlichen, wie der Kreis zu zeichnen ist. SVG unterstützt grafische Elemente wie Rechtecke, Kreise, Ellipsen, Linien, Polygone, Pfade, Farbverläufe und andere Effekte. Dies ist der grundlegende Grund, warum SVG sich anders verhält als Formate wie PNG und JPEG.

SVG vs. Rasterbilder: Was ist der Unterschied?

Digitale Bilder können grob als Rastergrafiken oder Vektorgrafiken dargestellt werden.

Merkmal	SVG	PNG	JPG/JPEG
Haupttyp	Vektorfähig	Raster	Raster
Aufgebaut aus	Pfaden, Formen und grafischen Anweisungen	Pixeln	Pixeln
Skaliert ohne normale Verpixelung	Ja, für Vektorinhalte	Nein	Nein
Gut für Logos	Ausgezeichnet	Gut bei festen Größen	Normalerweise nicht ideal
Gut für Fotos	Normalerweise nicht ideal	Möglich	Ausgezeichnet
Unterstützt Transparenz	Ja	Ja	Keine Standard-Alpha-Transparenz
Bearbeitbare Vektorpfade	Ja, wenn echte Vektorinhalte vorhanden sind	Nein	Nein
Häufige Web-Nutzung	Logos, Symbole, Illustrationen	Transparente Grafiken, Screenshots	Fotos

Rasterbilder haben eine bestimmte Pixelauflösung. Wenn Sie sie weit über ihre ursprünglichen Abmessungen hinaus vergrößern, werden die einzelnen Pixel deutlicher sichtbar.

Vektorgrafiken funktionieren anders, da ihre Formen neu berechnet werden können, wenn das Bild seine Größe ändert. Adobe beschreibt SVG als Vektorformat, dessen Größe erheblich geändert werden kann, ohne dass die Art von Qualität verloren geht, die normalerweise beim Vergrößern von Rastergrafiken auftritt.

Warum können SVG-Bilder ohne Qualitätsverlust skaliert werden?

Stellen Sie sich vor, Sie zeichnen einen Kreis auf zwei verschiedene Arten.

Mit einem Rasterbild könnten Sie Tausende einzelner Pixel speichern, die zusammen wie ein Kreis aussehen.

Mit einem Vektorbild könnten Sie stattdessen Anweisungen speichern, die Folgendes beschreiben:

den Mittelpunkt des Kreises;
seinen Radius;
seine Füllfarbe;
seinen Rand.

Wenn der Kreis zehnmal größer werden soll, muss das Programm nicht die Originalpixel strecken. Es kann die mathematische Form einfach in den neuen Dimensionen rendern. Diese Eigenschaft wird oft als Auflösungsunabhängigkeit bezeichnet.

Aus diesem Grund kann ein richtig erstelltes Vektorlogo für ein kleines Website-Symbol verwendet und dann für ein viel größeres Design vergrößert werden, ohne dass die blockigen Kanten entstehen, die mit vergrößerten Rasterbildern verbunden sind.

Wofür werden SVG-Dateien verwendet?

SVG funktioniert besonders gut, wenn ein Bild aus erkennbaren Formen, Linien, Umrissen oder relativ deutlichen Farbbereichen besteht.

Logos

Logos müssen oft in vielen verschiedenen Größen erscheinen. Dasselbe Logo könnte in einer Website-Kopfzeile, einer mobilen Benutzeroberfläche, einer Präsentation, auf Druckmaterial, Beschilderungen oder Marketinggrafiken verwendet werden. Die Verwendung von Vektorgrafiken macht die Größenänderung viel einfacher, ohne dass das Logo für jede Größe neu erstellt werden muss.

Icons (Symbole)

Schnittstellensymbole sind ein weiterer häufiger Anwendungsfall für SVG. Einfache Formen und Pfade können auf Displays mit unterschiedlichen Bildschirmgrößen und Pixeldichten sauber bleiben.

Illustrationen

Flache Illustrationen, Strichzeichnungen und Grafiken mit klar definierten Formen können als SVG-Dateien sehr gut funktionieren.

Diagramme

Da SVG einzelne grafische Elemente und Text enthalten kann, kann es für Diagramme und andere strukturierte Grafiken nützlich sein. SVG-Elemente können auch mit Webtechnologien gestaltet und manipuliert werden.

Schneide- und Handwerksdesigns

SVG wird auch häufig in Workflows verwendet, in denen Software tatsächliche Umrisse oder Pfade benötigt, anstatt nur ein Bild dieser Umrisse. Vektorpfade können beispielsweise nützlich sein, wenn geeignetes Bildmaterial zum Schneiden, Gravieren und für ähnliche Design-Workflows vorbereitet wird. Die genauen Anforderungen hängen von der verwendeten Software und Maschine ab.

Vorteile von SVG-Dateien

SVGs können ohne normale Rasterpixelierung skaliert werden: Dies ist der bekannteste Vorteil von SVG. Wenn eine SVG aus geeigneten Vektorpfaden und -formen besteht, kann die Grafik in unterschiedlichen Dimensionen gerendert werden, ohne dass auf ein festes Pixelraster zurückgegriffen werden muss.
Einzelne Elemente können bearbeitet werden: Eine richtig strukturierte SVG kann separate Pfade, Formen, Füllungen, Konturen, Gruppen und Textelemente enthalten. Das macht das Ändern von Vektorgrafiken viel einfacher als das Ändern eines einzelnen abgeflachten Rasterbildes.
SVG ist textbasiert: SVG verwendet XML-Markup, um grafischen Inhalt zu beschreiben. Das bedeutet, dass eine SVG mit textbasierten Tools sowie visuellen Vektoreditoren inspiziert und bearbeitet werden kann.
SVG funktioniert gut im Web: SVG wurde speziell entwickelt, um mit Webtechnologien zu arbeiten. Es kann als Bild angezeigt werden und mit CSS und JavaScript interagieren.
SVG kann für einfache Grafiken effizient sein: Ein einfaches Symbol oder Logo kann oft effizient als kleine Sammlung von Pfaden und Formen dargestellt werden. Komplexe Vektorgrafiken können jedoch zu großen Dateien führen.

Einschränkungen von SVG-Dateien

SVG ist leistungsstark, aber nicht für jedes Bild das richtige Format.

SVG ist normalerweise nicht das beste Format für Fotografien

Ein Foto kann Millionen von subtilen Veränderungen in Farbe, Beleuchtung und Textur enthalten. Der Versuch, jedes Detail als einzelne Vektorformen nachzubilden, kann zu äußerst komplizierten Grafiken führen.

Komplexe SVGs können zu viele Pfade enthalten

Vektorisierungssoftware kann detaillierte Rasterbilder unter Verwendung einer großen Anzahl von Pfaden und Ankerpunkten neu erstellen. Das Ergebnis ist technisch gesehen möglicherweise ein Vektor, kann jedoch schwierig zu bearbeiten und unnötig komplex sein.

Pro-Tipp: Mehr Pfade bedeuten nicht automatisch ein besseres SVG. Eine nützliche Vektorgrafik sollte visuelle Genauigkeit mit sauberer, überschaubarer Geometrie in Einklang bringen. Wenn Ihre Datei zu komplex ist, erfahren Sie hier, wie Sie SVG-Knoten reduzieren können.

Ist jede SVG-Datei wirklich ein Vektor?

Nein. Eine SVG-Datei kann Vektorgrafiken, Rasterbilder oder eine Kombination aus beidem enthalten. Die SVG-Spezifikation berücksichtigt ausdrücklich gemischte Vektor-/Rastergrafiken.

Dies führt zu einem der größten Missverständnisse im Zusammenhang mit der PNG-zu-SVG-Konvertierung. Angenommen, Sie haben logo.png. Wenn Sie dieses PNG einfach in einen SVG-Container einfügen, erhalten Sie logo.svg, aber das sichtbare Logo ist im Grunde genommen immer noch dasselbe Pixelbild. Sie haben jetzt eine SVG-Datei, aber möglicherweise keine ordnungsgemäß vektorisierte Grafik.

Ein echter Raster-zu-Vektor-Workflow versucht, Merkmale des Rasterbilds mithilfe von Vektorelementen nachzubilden. Benutzer berichten häufig, dass sie Dateien exportiert haben, von denen sie glaubten, es handele sich um Vektoren, nur um dann festzustellen, dass die Ausgabe keine bearbeitbare Geometrie enthielt.

Woran erkennt man, ob ein SVG wirklich vektorisiert ist?

Das Öffnen der Datei in einem Vektoreditor ist eine nützliche Möglichkeit, sie zu überprüfen. Bei richtig vektorisierten Grafiken sollten Sie normalerweise Vektorkomponenten wie Pfade, Formen oder Knoten auswählen können.

Wenn sich das gesamte Design wie ein einzelnes eingebettetes Bitmap-Bild verhält, enthält das SVG möglicherweise nur Rastergrafiken und keine brauchbare Vektornachbildung.

Ein weiterer einfacher Test ist extremes Zoomen. Ein Vektorpfad sollte weiterhin anhand seiner zugrunde liegenden Geometrie gerendert werden, anstatt das vergrößerte Pixelraster eines eingebetteten Rasterbildes offenzulegen.

Wie konvertiert man PNG oder JPG in SVG?

Hier wird die Bildvektorisierung wichtig.

PNG- und JPG-Dateien sind Rasterformate. SVG kann Vektorpfade und -formen darstellen. Daher beinhaltet die Erstellung eines echten Vektor-SVGs aus einem PNG oder JPG im Allgemeinen die Interpretation des Rasterbilds und die Neuerstellung seiner visuellen Struktur als Vektorgeometrie. Dieser Vorgang wird allgemein als Bildvektorisierung, Raster-zu-Vektor-Konvertierung oder Bildnachverfolgung (Image Tracing) bezeichnet.

Sie können unseren kostenlosen Online-Konverter für PNG in SVG verwenden, um diesen Vorgang automatisch abzuwickeln.

Häufig gestellte Fragen

Ist SVG eine Vektordatei?

SVG ist ein vektorfähiges Grafikformat, das zur Beschreibung von Vektorgrafiken entwickelt wurde, aber SVG-Dateien können auch Rasterinhalte enthalten. Daher garantiert die Erweiterung .svg allein nicht, dass jedes visuelle Element innerhalb der Datei Vektorgeometrie ist.

Verliert SVG beim Vergrößern an Qualität?

Richtige Vektorelemente in einem SVG können in verschiedenen Größen gerendert werden, ohne die normale Pixelierung, die durch das Vergrößern von Rastergrafiken entsteht. Ein eingebettetes Rasterbild in einem SVG bleibt ein Raster und unterliegt weiterhin seiner zugrunde liegenden Auflösung.

Ist SVG besser als PNG?

Es kommt auf das Bild an. SVG ist im Allgemeinen besser für skalierbare Logos, Symbole und Illustrationen geeignet, während PNG für Rastergrafiken, Screenshots und andere pixelbasierte Bilder nützlich ist.

Kann ich ein PNG in ein SVG konvertieren?

Ja, aber es gibt einen wichtigen Unterschied zwischen dem Einfügen eines PNGs in eine SVG-Datei und der Vektorisierung des PNGs in echte Vektorpfade. Wenn Ihr Ziel skalierbare, bearbeitbare Vektorgrafiken sind, benötigen Sie normalerweise eine Raster-zu-Vektor-Konvertierung. Folgen Sie unserem PNG-zu-SVG-Leitfaden, um zu erfahren, wie.

Was ist der Unterschied zwischen SVG und Vektorisierung?

SVG ist ein Dateiformat. Vektorisierung ist ein Prozess. Die Vektorisierung nimmt Rasterinformationen aus einem Bild wie einem PNG oder JPG und versucht, diese mithilfe von Vektorgeometrie nachzubilden. SVG ist eines der Formate, in denen die resultierende Vektorgrafik gespeichert werden kann.

Abschließende Gedanken

SVG ist mehr als nur eine weitere Bilderweiterung. Es ist ein XML-basiertes Grafikformat, das Bilder mithilfe skalierbarer Pfade, Formen, Texte und anderer grafischer Elemente beschreiben kann. Das macht es besonders nützlich für Logos, Icons, Illustrationen und Grafiken, die über verschiedene Größen hinweg funktionieren müssen.

Das Wichtigste, woran Sie sich erinnern sollten, ist Folgendes: SVG ist das Format. Vektorisierung ist der Prozess, der ein Rasterbild in eine in diesem Format gespeicherte Vektorgrafik umwandeln kann.