Scalable Vector Graphics

SVG-Dateiformat: Der umfassende Leitfaden zu Scalable Vector Graphics

Was ist eine SVG-Datei?

SVG steht für Scalable Vector Graphics und bezeichnet ein XML-basiertes Dateiformat für zweidimensionale Vektorgrafiken. Im Gegensatz zu Rastergrafiken wie JPEG oder PNG speichert SVG keine Pixelinformationen, sondern mathematische Beschreibungen von Formen, Linien, Kurven und Farben. Das bedeutet, dass SVG-Grafiken verlustfrei auf jede beliebige Größe skaliert werden können – ohne Qualitätsverlust oder sogenannte Treppeneffekte.

Das Format wurde vom World Wide Web Consortium (W3C) entwickelt und erstmals im Jahr 1999 als Empfehlung veröffentlicht. Die Entwicklung begann in den späten 1990er Jahren als Reaktion auf den wachsenden Bedarf an skalierbaren Grafiken im Web. Frühere proprietäre Formate wie Macromedia Flash oder VML (Vector Markup Language) von Microsoft prägten damals die Diskussion, doch das W3C setzte auf einen offenen Standard. SVG 1.1, das bis heute am weitesten verbreitete und unterstützte Version, wurde 2003 standardisiert. SVG 2.0 befindet sich seit Jahren in der Entwicklung und bringt erweiterte Funktionen wie bessere CSS-Integration und neue Filtermöglichkeiten.

Da SVG-Dateien im Grunde reine Textdateien im XML-Format sind, können sie mit jedem Texteditor geöffnet und bearbeitet werden. Sie lassen sich direkt in HTML-Dokumente einbetten und über CSS sowie JavaScript dynamisch gestalten und animieren – eine Eigenschaft, die das Format besonders für Webentwickler attraktiv macht.

Technische Spezifikationen

SVG basiert vollständig auf der Extensible Markup Language (XML) und folgt damit einem klar strukturierten, menschenlesbaren Textformat. Hier sind die wichtigsten technischen Merkmale im Überblick:

Dateityp: Vektorgrafik, XML-basiert
MIME-Typ: image/svg+xml
Komprimierung: Unkomprimiert in der Grundform; komprimierte Variante als SVGZ (gzip-komprimiert) verfügbar, typischerweise 50–80 % kleiner
Farbtiefe: Unbegrenzt – SVG unterstützt RGB, RGBA, HSL, benannte Farben sowie ICC-Farbprofile
Transparenz: Vollständig unterstützt über Alpha-Kanal und Opacity-Attribute
Auflösung: Auflösungsunabhängig – keine feste Pixelgröße, da mathematisch beschrieben
Animation: Nativ über SMIL-Animationen oder CSS- und JavaScript-Animationen möglich
Schriftarten: Einbettung von Webfonts oder Umwandlung in Pfade möglich
Filter und Effekte: Blur, Schatten, Farbmatrizen, Compositing und weitere SVG-Filter
Zeichensatz: UTF-8 und UTF-16

SVG unterstützt verschiedene Grundformen wie Rechtecke (rect), Kreise (circle), Ellipsen (ellipse), Linien und Polygone sowie beliebig komplexe Pfade über das path-Element. Darüber hinaus können Rastergrafiken, Text und externe Ressourcen eingebettet werden.

Typische Anwendungsbereiche

SVG findet in zahlreichen Bereichen des digitalen Alltags Verwendung:

Webdesign und UI: Icons, Logos, Buttons und Illustrationen auf Webseiten skalieren perfekt auf allen Bildschirmgrößen und Auflösungen.
Datenvisualisierung: Bibliotheken wie D3.js nutzen SVG intensiv für interaktive Diagramme, Karten und Grafiken.
Animationen: Animierte Loader, interaktive Infografiken und Microinteractions lassen sich direkt im Browser rendern.
Druckvorbereitung: SVG eignet sich für druckfertige Logos und Grafiken, die in verschiedenen Formaten ausgegeben werden sollen.
Kartografie: Geografische Karten und Schaltpläne profitieren von der Skalierbarkeit des Formats.
Lasercut und CNC-Fräsen: In der Maker-Community wird SVG als Eingabeformat für Schneideplotter und CNC-Maschinen genutzt.

Vor- und Nachteile

Vorteile	Nachteile
Verlustfreie Skalierung auf jede Größe	Ungeeignet für Fotos und komplexe Rastergrafiken
Kleine Dateigröße bei einfachen Grafiken	Komplexe SVGs mit vielen Pfaden können sehr groß werden
Direkt im Browser darstellbar ohne Plugins	Rendering-Unterschiede zwischen Browsern möglich
Bearbeitbar mit Texteditoren und Grafikprogrammen	Lernkurve bei manueller XML-Bearbeitung
Unterstützt CSS, JavaScript und Animationen	Sicherheitsrisiken durch eingebettete Skripte
Offener W3C-Standard, keine Lizenzkosten	SVG 2.0 noch nicht vollständig implementiert
Barrierefreiheit durch eingebettete Textelemente	Komplizierte Filtereffekte können die Performance belasten

SVG-Dateien öffnen und anzeigen

SVG-Dateien lassen sich mit einer Vielzahl von Programmen öffnen und bearbeiten:

Webbrowser: Google Chrome, Mozilla Firefox, Microsoft Edge, Safari und Opera zeigen SVG-Dateien nativ an.
Adobe Illustrator: Der Industriestandard für Vektorgrafiken unterstützt SVG vollständig für Import und Export.
Inkscape: Kostenlose Open-Source-Vektorgrafik-Software mit hervorragender SVG-Unterstützung.
Affinity Designer: Professionelle Alternative zu Illustrator mit vollständiger SVG-Kompatibilität.
Figma und Sketch: Beliebte UI-Design-Tools, die SVG importieren und exportieren können.
CorelDRAW: Unterstützt SVG-Import und -Export in seiner Vektorbearbeitungsumgebung.
VS Code und Texteditoren: Da SVG reiner XML-Text ist, kann jeder Editor den Quellcode anzeigen und bearbeiten.

SVG-Dateien online konvertieren

Manchmal ist es notwendig, eine SVG-Datei in ein anderes Format umzuwandeln – etwa in PNG für die Verwendung in Präsentationen oder in PDF für den Druck. Ebenso kann es vorkommen, dass man eine Rastergrafik als Ausgangspunkt für ein SVG nutzen möchte.

Mit Metric Converter auf metric-converter.com lassen sich SVG-Dateien schnell und unkompliziert online konvertieren – ohne Installation einer Software. Das Tool unterstützt gängige Konvertierungen wie SVG zu PNG, SVG zu JPG oder SVG zu PDF. Der Dienst ist kostenlos nutzbar und verarbeitet Dateien direkt im Browser, was die Privatsphäre der Nutzer schützt.

Häufig gestellte Fragen

Was ist der Unterschied zwischen SVG und PNG?

PNG ist ein Rastergrafikformat, das Bilder als Pixelraster speichert. Bei Vergrößerung verliert PNG an Schärfe und wirkt pixelig. SVG hingegen speichert Grafiken als mathematische Beschreibungen und bleibt bei jeder Größe scharf. PNG eignet sich besser für Fotos und detailreiche Bilder, SVG ist ideal für Logos, Icons und Illustrationen.

Ist SVG sicher für die Verwendung im Web?

SVG-Dateien können JavaScript und externe Ressourcen einbetten, was ein potenzielles Sicherheitsrisiko darstellt – insbesondere wenn SVGs von Nutzern hochgeladen werden. Für selbst erstellte SVGs auf vertrauenswürdigen Webseiten ist das Format sicher. Es empfiehlt sich, externe SVGs zu bereinigen (sanitizen), bevor sie auf einer Webseite eingebettet werden. Viele Content Security Policies (CSP) schränken SVG-Skripte zusätzlich ein.

Kann ich SVG für den Druck verwenden?

Ja, SVG ist grundsätzlich für den Druck geeignet, da es auflösungsunabhängig ist und in beliebiger Größe ausgegeben werden kann. Professionelle Druckereien bevorzugen jedoch häufig PDF oder EPS. SVG kann über Programme wie Inkscape oder Adobe Illustrator problemlos in druckfertige Formate exportiert werden. Wichtig ist dabei, Schriften in Pfade umzuwandeln, um Kompatibilitätsprobleme zu vermeiden.

Warum ist meine SVG-Datei so groß?

SVG-Dateien können groß werden, wenn sie sehr viele Pfade, eingebettete Rastergrafiken oder unnötige Metadaten enthalten. Grafikprogramme fügen oft überflüssige Informationen ein. Mit Tools wie SVGO (SVG Optimizer) oder dem Bereinigungswerkzeug in Inkscape lässt sich die Dateigröße deutlich reduzieren. Alternativ kann die komprimierte SVGZ-Variante verwendet werden.