Was ist SVG? Der Leitfaden zum Scalable Vector Graphics-Format
SVG (Scalable Vector Graphics) ist ein einzigartiges Bildformat, das XML verwendet, um zweidimensionale Grafiken als Vektoren statt als Pixel zu beschreiben. Anders als Rasterformate wie JPEG oder PNG können SVG-Bilder ohne Qualitätsverlust auf jede beliebige Größe skaliert werden, was sie ideal für Logos, Icons, Diagramme und responsives Webdesign macht.
Was ist SVG?
SVG ist ein XML-basiertes Vektorbildformat, das vom W3C entwickelt und 2001 eingeführt wurde. Anders als Rasterformate (JPEG, PNG, GIF), die Bilder als Pixelraster speichern, speichert SVG Bilder als mathematische Beschreibungen von Formen, Pfaden, Text und Farbverläufen. Das bedeutet, dass das Bild auf jede beliebige Größe skaliert werden kann – von einem winzigen Icon bis zu einem Plakat – ohne jeglichen Qualitätsverlust oder Zunahme der Dateigröße.
SVG-Dateien sind im Wesentlichen Textdateien mit XML-Markup, was bedeutet, dass sie mit jedem Texteditor bearbeitet, von Suchmaschinen indiziert und effektiv mit gzip komprimiert werden können. SVG unterstützt Styling via CSS, Interaktivität via JavaScript und Animation via SMIL oder CSS-Animationen. TurnPic konvertiert Rasterbilder in SVG, indem die Bitmap-Daten in einen SVG-Container eingebettet werden, was die SVG-Struktur und Skalierbarkeit bietet und gleichzeitig die ursprünglichen Pixeldaten erhält.
Vor- und Nachteile von SVG
SVG bietet einzigartige Vorteile für Vektorgrafiken, hat jedoch Einschränkungen bei fotorealistischem Inhalt.
| Vorteile | Nachteile |
|---|---|
| Unendlich skalierbar ohne Qualitätsverlust – ideal für responsives Design | Nicht geeignet für komplexe Fotos – SVG ist für Vektorgrafiken konzipiert |
| Kleine Dateigrößen für einfache Grafiken wie Logos und Icons | Komplexe SVGs mit vielen Elementen können groß und langsam beim Rendern werden |
| Bearbeitbarer, durchsuchbarer Text und CSS/JavaScript-Interaktivitätsunterstützung | Eingebettete Rasterbilder in SVG profitieren nicht von der Vektorskalierbarkeit |
Browser-Kompatibilität
SVG wird von allen modernen Browsern hervorragend unterstützt – Chrome, Firefox, Safari, Edge und Opera unterstützen SVG seit vielen Jahren. SVG kann inline in HTML angezeigt, als Bildquelle referenziert oder als eigenständige Datei geladen werden. Die mobile Browser-Unterstützung ist ebenfalls umfassend. Die wichtigste Kompatibilitätsüberlegung ist, dass sehr alte Browser (IE 8 und früher) SVG nicht unterstützen, was 2026 jedoch kaum noch relevant ist.
Wann sollte man SVG verwenden?
SVG ist das ideale Format für jede Grafik, die ohne Qualitätsverlust skaliert werden muss. Es ist das bevorzugte Format für Logos, Icons, Diagramme, Charts und Illustrationen, die in verschiedenen Größen angezeigt werden. Für Fotos und komplexe Bilder mit vielen Farben ist SVG nicht geeignet – verwenden Sie stattdessen JPEG, PNG, WebP oder AVIF.
Typische Anwendungsfälle, in denen SVG überzeugt, sind:
- Logos und Branding-Grafiken, die in jeder Größe scharf aussehen sollen
- Icons und UI-Elemente für responsive Websites und Apps
- Diagramme, Charts und technische Illustrationen
- Grafiken, die CSS-Styling oder JavaScript-Interaktivität benötigen
So konvertieren Sie Bilder in SVG
Die Konvertierung in SVG mit TurnPic bettet Ihr Rasterbild in einen SVG-Container ein. Laden Sie Ihre JPEG-, PNG-, GIF-, BMP-, WebP-, AVIF- oder ICO-Dateien über die SVG-Konverterseite hoch. Das Tool unterstützt Batch-Konvertierung von bis zu 30 Bildern pro Upload bei einer Dateigrößenbegrenzung von 10 MB pro Datei.
Die Konvertierung erstellt eine SVG-Datei, die das ursprüngliche Bitmap-Bild als Base64-codierte Daten innerhalb der SVG-XML-Struktur enthält. Dies bietet das SVG-Dateiformat und die SVG-Struktur, während der visuelle Inhalt erhalten bleibt. Die resultierende SVG-Datei kann in jeder SVG-kompatiblen Anwendung geöffnet werden. Nach Abschluss der Verarbeitung laden Sie jede SVG-Datei einzeln oder als ZIP-Archiv herunter.
Häufig gestellte Fragen
Kann SVG Fotos enthalten?
Reines SVG ist ein Vektorformat und nicht für Fotos konzipiert. SVG kann jedoch Rasterbilder (Bitmaps) innerhalb seiner XML-Struktur mittels Base64-Codierung oder externer Referenzen einbetten. TurnPic nutzt diesen Ansatz, um SVG-Dateien aus Rasterbildern zu erstellen. Das eingebettete Bild behält seine pixelbasierte Natur, ist aber in das SVG-Format eingebettet.
Wird mein SVG-Bild ohne Qualitätsverlust skalierbar sein?
Reine Vektor-SVG-Grafiken skalieren perfekt ohne jeglichen Qualitätsverlust. Wenn ein SVG jedoch ein eingebettetes Rasterbild enthält (wie vom TurnPic-Konverter erzeugt), ist der eingebettete Bitmap-Teil weiterhin pixelbasiert und zeigt Qualitätsverlust, wenn er über seine ursprüngliche Auflösung hinaus skaliert wird. Der SVG-Container selbst ist skalierbar, die Details des eingebetteten Bildes jedoch nicht.
Ist SVG kleiner als PNG oder JPEG?
Für einfache Vektorgrafiken wie Logos und Icons sind SVG-Dateien typischerweise deutlich kleiner als vergleichbare PNG-Dateien. Wenn SVG jedoch ein eingebettetes Rasterbild enthält, ist die Datei tatsächlich größer als das Original, da die Bilddaten als Base64 codiert sind (was etwa 33 % Overhead hinzufügt). Bei fotorealistischem Inhalt sind JPEG oder WebP deutlich kleiner.
Kann ich SVG-Dateien bearbeiten?
Ja, SVG-Dateien sind XML-Textdateien und können mit jedem Texteditor oder spezieller Vektorgrafik-Software wie Adobe Illustrator, Inkscape oder Figma bearbeitet werden. Dies ist einer der Hauptvorteile von SVG – die Bilddefinition ist menschenlesbar und bearbeitbar, anders als Rasterformate, die binär sind.
Bereit, Ihre Bilder in SVG zu konvertieren?
Jetzt zu SVG konvertieren