SVG-Vektorgrafik (.svg)
W3C-Empfehlung StandardScalable Vector Graphics (SVG) ist ein XML-basiertes Vektorbildformat für zweidimensionale Grafiken mit Unterstützung für Interaktivität, CSS-Styling und Animation.
Von SVG zu PNG konvertieren
Kostenloser Konverter von SVG zu PNG im Browser. Konvertieren Sie Dateien sofort auf Ihrem Gerät.
SVG online komprimieren
Privat - Dateien verlassen Ihr Gerät nie
Untersuchen & Metadaten
Betriebssysteme und Dateianalyseprogramme identifizieren SVG-Dateien anhand der führenden binären Bytefolge:
Headersignatur auf Byte-Ebene (Magic Bytes)
Betriebssysteme und Dateianalyseprogramme identifizieren SVG-Dateien anhand der führenden binären Bytefolge:
HEX-SIGNATUR (OFFSET 0):
3C 73 76 67ASCII-DARSTELLUNG: <svg
Standardisierung: W3C-Empfehlung (SVG 1.1 / SVG 2)
Technische Daten
| Container-Architektur | XML-basiertes Textmarkup-Dokument zur Definition von 2D-Vektorgeometrie |
| Kompression | Gzip- / Brotli-Textkomprimierung (SVGZ verwendet Gzip-Komprimierung) |
| Byte-Reihenfolge | Nicht zutreffend (textbasierter UTF-8- / UTF-16-Zeichenstrom) |
| Farbräume | sRGB, CSS Color Module 4 (Display P3, lab, lch) |
| Kanäle und Struktur | Vektorformen mit unbegrenzter Auflösung, Bézier-Kurven, Typografie und Deckkraftmasken |
| Max. Abmessungen | Auflösungsunabhängig (skaliert unendlich auf jeden Viewport ohne Verpixelung) |
| Transparenz | Vollständige variable Alphatransparenz und CSS-Mischmodi |
| Streaming und progressive Darstellung | Progressives Text-Stream-Parsing wird vom XML-Parser des Browsers unterstützt |
Technische Vergleichsmatrix: SVG und Konkurrenzformate
| Technisches Attribut | SVG (Aktuelles Format) | HTML5 Canvas | PNG | |
|---|---|---|---|---|
| Rendering-Modell | Retained-Mode-Vektor-DOM | Immediate-Mode-Bitmap-Canvas | Retained-Mode-Festseitencontainer | Raster-Pixelgitter |
| Stil & CSS | Vollständig gestaltbar über CSS-Klassen und Variablen | Erfordert Neuzeichnungen über die JavaScript-Canvas-API | Kein dynamisches CSS-Styling | Feste Rasterpixel |
| Unendliche Skalierbarkeit | Ja (mathematische Vektorkurven) | Erfordert manuelle Auflösungskalierung | Ja (Vektorelemente) | Nein (verpixelt bei Vergrößerung) |
| Interaktivität | Native DOM-Ereignisse (Hover, Klick, Animationen) | Erfordert manuelle Hit-Detection-Berechnungen | Statisches Dokument | Erfordert Image-Map oder Canvas |
Häufige Datenbeschädigungen und Leitfaden zur Wiederherstellung anhand von Hex-Daten
Browser zeigt XML Parsing Error: unclosed token oder mismatched tag an.
Ursache: Fehlerhafte XML-Syntax, fehlende schließende Tags oder nicht maskierte Et-Zeichen ('&' statt '&').
Wiederherstellung: Mit einem XML-Linter validieren (xmllint file.svg) und nicht ausbalancierte Tags korrigieren.
Sicherheitsanalyse und Angriffsvektoren für Parser
Da SVG ausführbares XML ist, das '<script>'-Tags und externe Entitäten unterstützt, birgt es erhebliche XSS- und SSRF-Risiken, wenn nicht vertrauenswürdige SVGs angezeigt werden.
Bekannte Angriffsvektoren
- Stored Cross-Site Scripting (XSS) über eingebettete '<script>'-Tags oder 'onload='-Ereignishandler.
- XML External Entity (XXE)-Angriffe, die lokale Serverdateien auslesen, wenn sie auf Backend-Servern geparst werden.
- Billion Laughs-XML-Entitätserweiterung, die zu einer Dienstverweigerung (Denial of Service) führt.
Empfohlene Schutzmaßnahmen: SVGs vor dem Einbetten immer mit DOMPurify bereinigen oder SVGs mit 'Content-Security-Policy: default-src 'none'' oder als '<img>'-Tags bereitstellen, die Skripte automatisch deaktivieren.
Historische Ursprünge & Meilensteine
Hauptvorteile & Stärken
- Unendliche Auflösungsunabhängigkeit: gestochen scharfe Linien und Typografie auf jedem Display und bei jeder Druckskalierung.
- Extrem geringe Dateigröße für Logos, Symbole und Benutzeroberflächenelemente.
- Vollständig skriptfähig und über CSS und JavaScript im Browser-DOM gestaltbar.
Technische Einschränkungen & Nachteile
- Ungeeignet für Fotografien oder komplexe Bilder mit kontinuierlichen Tönen.
- Komplexe Vektorpfade mit Tausenden von Knoten können zu CPU-Rendering-Verzögerungen und hohem Akkuverbrauch führen.
- Die XML-Natur erlaubt eingebettetes Skripting, was eine strenge Bereinigung vor dem Rendern nicht vertrauenswürdiger Uploads erfordert.
Interessante technische Fakten
- Da SVG reiner XML-Text ist, reduziert die Komprimierung mit Gzip (wobei eine .svgz-Datei entsteht) die Größe oft um 70 % bis 80 %.
- Das viewBox-Attribut definiert eine abstrakte Koordinatenleinwand, die dynamisch auf physische Bildschirmpixel abgebildet wird.
- Frühe Webbrowser verfügten anfangs über keine nativen SVG-Engines, was Adobe dazu veranlasste, das Adobe SVG Viewer-Browser-Plugin zu vertreiben, bevor sich die native Browser-Unterstützung um 2011 verfestigte.
Häufig gestellte technische Fragen
Können SVG-Dateien bösartigen Code enthalten?
Ja. Da SVG gültiges XML ist, kann es eingebettetes JavaScript ('<script>') enthalten, das ausgeführt wird, wenn das SVG direkt in einem Browser geladen oder in einem Inline-'<svg>'-Element geöffnet wird. Das Bereitstellen von SVGs über ein '<img>'-Tag neutralisiert die Skriptausführung automatisch.
Wann sollte ich SVG anstelle von PNG verwenden?
Verwenden Sie SVG für Symbole, Logos, Diagramme, Illustrationen und Typografie, bei denen eine gestochen scharfe Skalierung über alle Bildschirmgrößen hinweg und kleine Dateigrößen erforderlich sind. Verwenden Sie PNG oder WebP für Fotografien.
Wie kann ich große oder komplexe SVG-Dateien optimieren?
Sie können Vektorpfade bereinigen, indem Sie redundante Metadaten, Editor-Kommentare (von Inkscape oder Illustrator), unsichtbare Gruppen und nicht verwendete Namensraumdeklarationen mit Tools wie SVGO oder durch Ausführen einer SVG-Komprimierung entfernen.
Passende SVG-Konvertierungen
Die Konvertierung von SVG-Vektordateien in PNG-Rasterbilder wandelt skalierbare, codebasierte Grafiken in Raster mit fester Pixelzahl um, die mit allen Anwendungen kompatibel sind.
Kapseln Sie Raster-PNG-Bilder in einem SVG-XML-Vektorcontainer, damit sie im Web responsiv skaliert und in vektorkompatible Layouts integriert werden können.
Wandeln Sie ältere 16-Bit-Windows-GDI-Vektorzeichnungsbefehle in moderne, skalierbare SVG-Pfade um - ohne Auflösungsverlust.
Wandeln Sie 32-Bit-Grafiken im Windows-Enhanced-Metafile-Format in klare, responsive SVG-Vektorgrafiken für Web- und Designprogramme um.
Die Konvertierung einer DXF-Zeichnung in einen CAD-SVG-Export verwandelt komplexe technische Vektordaten in schlanke XML-Grafiken für Webbrowser und Vektoreditoren.
Die Konvertierung von skalierbaren Vektorgrafiken in das Drawing Exchange Format übersetzt webfähige visuelle Vektoren in präzise mathematische Koordinaten, die von CAD-Software benötigt werden.
Teilen Sie ein SVG-Logo oder eine Illustration als einseitiges PDF. Die skalierbaren Pfade werden zu einem Bild mit fester Auflösung, sodass sich beim Zoomen keine Vektordetails wiederherstellen lassen.