Was ist das SVG-Dateiformat?
Die Abkürzung .svg steht für Scalable Vector Graphics, und es ist ein Format für 2D-Grafikdateien. SVG ist eine XML-basierte Sprache, die 2D-Grafiken als reinen Text beschreibt. Das .svg-Format wurde vom *World Wide Web Consortium (W3C)* entwickelt und ist das Standardformat zur Darstellung von Vektorgrafiken im Web; es wurde 2001 zur W3C-Empfehlung (SVG 1.1 folgte 2011).
Da Text zur Beschreibung von Vektorgrafiken verwendet wird, kann die Größe einer .svg-Datei ohne Qualitätsverlust geändert werden. Vereinfacht gesagt - der Inhalt der Datei, ein Bild, kann in beliebiger Größe ohne Verpixelung dargestellt werden, was .svg ideal für Icons, Logos, Illustrationen und UI-Elemente macht, die bei jeder Auflösung scharf aussehen müssen.
.svg-Dateien können auch mit GZIP komprimiert werden, wodurch sich das Format zu .svgz ändert und die endgültige Größe um ca. 50-80 % reduziert wird.
Aufgrund ihrer textlichen, XML-basierten Natur können .svg-Dateien durchsucht, indiziert, komprimiert und geskriptet werden, was sie perfekt für den Austausch von Grafiken im Web geeignet macht. Alle modernen Browser rendern .svg-Bilder nativ ohne jedes Plugin. .svg-Dateien werden gleichermaßen von einfachen Texteditoren und fortgeschrittenen Vektorgrafik-Editoren wie Inkscape oder Adobe Illustrator unterstützt und können PNG-Rasterbilder, Animationen, CSS-Styling und interaktives JavaScript direkt in der Datei einbetten. Der MIME-Typ ist image/svg+xml.
Sicherheit
RISIKO: MEDIUMSVG ist XML und kann CSS und JavaScript EINBETTEN, daher kann eine im Browser geöffnete .svg Skripte ausführen - das macht bösartige SVGs zu einem realen Cross-Site-Scripting-, Weiterleitungs- und Phishing-Vektor; SVG-E-Mail-Anhänge wurden in Malware-Kampagnen eingesetzt (ein „harmloses Bild“, das tatsächlich ein Skript oder HTML-Formular enthält). Behandeln Sie unaufgeforderte .svg-Dateien wie Webseiten, nicht wie Bilder: Öffnen Sie sie nicht von unbekannten Absendern, und bereinigen Sie auf Websites hochgeladene SVGs (entfernen Sie Skripte/Ereignis-Handler), bevor Sie sie bereitstellen. Das Öffnen einer SVG in einem nicht skriptfähigen Viewer oder einem Code-Editor zur Überprüfung des XML ist sicher. Meiden Sie dubiöse Download-Seiten für „kostenlose SVG-Öffner/Konverter“, die Adware bündeln - Browser und Inkscape decken die eigentlichen Bedürfnisse ab.
Formatdetails
kurz gefasstProgramme zum Öffnen von SVG-Dateien
Windows4 apps
Adobe Illustrator
Kostenpflichtig Datei → Öffnen der .svg zum Bearbeiten; Datei → Exportieren für PNG/JPG. Der Branchenstandard für Vektorgrafiken. 
Web browser (Chrome, Edge, Firefox)
Kostenlos .svg per Doppelklick öffnen oder in das Browserfenster ziehen, um es in voller Qualität anzuzeigen.
Code editor (VS Code / Notepad++)
Kostenlos .svg als Text öffnen, um den XML-Markup direkt zu lesen/bearbeiten (und mit einer SVG-Erweiterung eine Vorschau zu sehen). 
macOS3 apps
Adobe Illustrator
Kostenpflichtig Datei → Öffnen der .svg zum Bearbeiten; Datei → Exportieren für PNG/JPG. Der Branchenstandard für Vektorgrafiken.
Web browser / Preview
Integriert .svg in Safari/Chrome öffnen zum Anzeigen; macOS Vorschau rendert SVG ebenfalls. 
Linux3 apps
GIMP
Open Source .svg importieren (rastert es in einer gewählten Auflösung) zur Pixelbearbeitung/Export.
SVG-Edit / boxy-svg (online editors)
Freemium SVG im Browser ohne Installation öffnen und bearbeiten (Boxy SVG oder Open-Source-SVG-Edit). Technische Details
technische Spezifikation| Dateistruktur | Reiner XML-Text; für Menschen lesbar und in jedem Texteditor ohne spezielle Software bearbeitbar |
| MIME-Typ | image/svg+xml |
| Zeichenkodierung | UTF-8 (in der XML-Kopfzeile deklariert); die Datei ist reiner Unicode-Text ohne binären Inhalt |
| Skalierbarkeit | Verlustfreie Skalierung - Geometrie wird mathematisch definiert, sodass bei keiner Größe Verpixelung auftritt |
| Komprimierte Variante | .svgz - das gleiche SVG-XML in GZIP verpackt; die Dateigröße ist typischerweise 50-80 % kleiner |
| Animationsunterstützung | Deklarative SMIL-Animationen und CSS-Animationen/Übergänge werden beide unterstützt |
| Skripting | JavaScript kann SVG-Elemente über die Standard-DOM-API abfragen und ändern und so Interaktivität ermöglichen |
| Styling | CSS kann über Inline-style-Attribute, eingebettete <style>-Blöcke oder externe Stylesheets angewendet werden |
| Koordinatensystem | Unendliche Leinwand mit benutzerdefinierten Einheiten; das viewBox-Attribut ordnet Dokumentkoordinaten dem Viewport zu |
| Geometrische Grundformen | path, circle, rect, ellipse, polygon, polyline, line - plus Verläufe, Muster, Masken und Filtereffekte |
| Browser-Rendering | Native Unterstützung in allen modernen Browsern (Chrome, Firefox, Edge, Safari) - kein Plugin erforderlich |
| Einbettung in HTML | Kann als <svg> inline eingebettet, über <img>, <object>, <embed> referenziert oder als CSS-Hintergrundbild verwendet werden |
| Barrierefreiheit | Textknoten sind maschinenlesbar; unterstützt <title>- und <desc>-Elemente sowie ARIA-Attribute |
| Rasterbildeinbettung | Externe Rasterbilder (PNG, JPEG) können über <image>-Elemente mit Dateipfaden oder Daten-URIs eingebettet werden |
| Dateikennung | Keine binären Magic-Bytes; erkannt am <svg-Root-Element, dem optional eine XML-Deklaration oder DOCTYPE vorangeht |
| Veröffentlicht | 2001 (SVG 1.0 W3C Recommendation); SVG 1.1 (2011); SVG 2 in development |
| Offener Standard | Ja · lizenzgebührenfrei |
| Spezifikation | www.w3.org |
SVG-Konvertierungen
Community Q&A
von Nutzern gefragtNoch keine Fragen - stellen Sie die erste Frage zu SVG-Dateien.
