Was ist das SVG-Format? Vollständiger technischer Leitfaden für 2026
Erfahren Sie alles über das SVG-Format (Scalable Vector Graphics): wie es funktioniert, wann man es verwendet und warum es für modernes Webdesign unverzichtbar ist.
Founder of VectoSolve
Self-taught developer, founder and sole developer of VectoSolve since 2024. He builds the conversion engine and the cutting, embroidery and 3D printing exports.
How this article was made: drafted with AI assistance, then edited and fact-checked before publication. About the author
Key Takeaways
- SVG ist ein XML-basiertes, W3C-standardisiertes Vektorformat, das ohne Qualitätsverlust unendlich skaliert
-
Inline-SVG bietet vollständige CSS/JS-Kontrolle;
<img>-Tags ermöglichen Caching — wählen Sie je nach Anwendungsfall -
Barrierefreiheit ist eingebaut:
<title>,<desc>,roleundaria-labelmachen SVGs screenreader-freundlich - Animation umfasst vier Ansätze: SMIL, CSS, JavaScript und die Web Animations API
- SVG aus nicht vertrauenswürdigen Quellen immer bereinigen — das Format kann Skripte einbetten
- Optimieren Sie mit dem SVG-Optimierer von VectoSolve zum Entfernen von Metadaten und Komprimieren von Pfaden
Was ist SVG wirklich?
SVG (Scalable Vector Graphics) ist nicht einfach nur ein weiteres Bildformat. Es ist ein vollständiges XML-Vokabular, das zweidimensionale Grafiken mithilfe mathematischer Koordinaten, geometrischer Primitive und Stildeklarationen beschreibt. Es steht auf derselben Ebene wie HTML: textbasiert, menschenlesbar, DOM-integriert und mit CSS stilisierbar.
Das W3C definiert SVG als „eine Sprache zur Beschreibung zweidimensionaler Grafiken in XML." Da es XML ist, ist jedes SVG ein strukturiertes Dokument, das Sie in einem Texteditor öffnen, mit JavaScript manipulieren und gegen ein Schema validieren können. Kein anderes gängiges Bildformat bietet das.
„SVG ist das native Bildformat des Webs. Es lebt nicht nur im Web — es ist das Web." — Chris Coyier
SVG-Anatomie: XML-Struktur und viewBox
Jedes SVG beginnt mit einem Wurzelelement <svg>. Das Verständnis seiner Attribute ist der Schlüssel zur Beherrschung des Formats.
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 200 100"
width="400" height="200">
<rect x="10" y="10" width="180" height="80" rx="8"
fill="#0f172a" stroke="#38bdf8" stroke-width="2"/>
<text x="100" y="58" text-anchor="middle"
fill="#f8fafc" font-size="18">Hallo, SVG!</text>
</svg>xmlnsdeklariert den SVG-Namensraum — erforderlich in eigenständigen.svg-Dateien, optional bei Inline-Einbindung in HTML5viewBox="0 0 200 100"definiert das interne Koordinatensystem: Ursprung bei(0,0), 200 Einheiten breit, 100 hochwidth/heightlegen die Rendergröße fest; der Browser bildet die viewBox auf diesen Viewport ab
Die viewBox entkoppelt den Koordinatenraum von Pixelmaßen. Ein Icon mit viewBox="0 0 24 24" wird bei 16px oder 512px identisch gerendert — der Browser skaliert das Koordinatensystem. Deshalb skaliert SVG unendlich.
SVG verwendet ein Koordinatensystem mit Y-Achse nach unten (wie CSS und Canvas), Ursprung oben links.
SVG ist pures XML. Sie können SVG-Dateien mit jedem Texteditor erstellen, bearbeiten und debuggen — VS Code, Vim, sogar Notepad. Das unterscheidet sich grundlegend von binären Formaten wie PNG oder JPG. Brauchen Sie eine visuelle Oberfläche? Nutzen Sie den SVG-Editor von VectoSolve für Live-Code-Ausgabe.
Geschichte: W3C, Browser-Kriege und moderne Akzeptanz
- 1998: Das W3C gründet die SVG-Arbeitsgruppe und vereint Adobes PGML- und Microsofts VML-Vorschläge
- 2001: SVG 1.0 wird W3C-Empfehlung
- 2003: SVG 1.1 verfeinert und modularisiert die Spezifikation
- 2011: SVG 1.1 Second Edition — die Version, die die meisten Browser vollständig implementieren
- 2018: SVG 2.0 erreicht den Candidate-Recommendation-Status, ausgerichtet auf CSS und HTML
Die IE-Saga
IE 8 und darunter hatten null SVG-Unterstützung. IE 9 (2011) lieferte grundlegendes Rendering, aber mit Lücken: keine SMIL-Animation, eingeschränkte Filter, viewBox-Eigenheiten. Der wahre Wendepunkt kam, als Microsoft IE 2022 zugunsten von Edge (Chromium) einstellte. Heute hat SVG eine globale Browser-Unterstützung von 98,5%.
A Full Year of Conversions for $49
Starter Annual: 25 conversions every month, $49 for the whole year. That is about $4.08 a month · Cancel anytime
Get the Annual DealSVG-Elementreferenz
| Element | Zweck | Häufige Verwendung |
|---|---|---|
<path> | Beliebige Formen über Zeichenbefehle (M, L, C, Z) | Icons, Logos, Konturen |
<rect> | Rechtecke mit optionalen abgerundeten Ecken (rx/ry) | Buttons, Karten, Hintergründe |
<circle> | Kreis durch Mittelpunkt und Radius | Punkte, Avatare, Kreisdiagramme |
<polygon> | Geschlossene Form aus Koordinatenpunkten | Sterne, Sechsecke, Pfeile |
<text> | Gerenderter, auswählbarer, durchsuchbarer Text | Beschriftungen, Wasserzeichen |
<g> | Gruppenelement für kollektive Transformationen/Stile | Ebenensteuerung, Gruppierung |
<defs> | Wiederverwendbare Definitionen (nicht direkt gerendert) | Verläufe, Muster, Beschneidungen |
<use> | Klont ein anderswo definiertes Element | Icon-Wiederverwendung, Sprites |
<symbol> | Wie <g> in <defs>, aber mit eigener viewBox | Icon-Bibliotheken, Sprite Sheets |
Inline SVG vs. img vs. CSS Background vs. object
| Methode | CSS-Styling | JS-Zugriff | Caching | Barrierefreiheit | Ideal für |
|---|---|---|---|---|---|
Inline <svg> | Vollständig | Vollständiger DOM | Nein | Ausgezeichnet | Icons, interaktive Grafiken |
<img>-Tag | Keins | Keins | Ja | Gut (alt) | Statische Logos, Illustrationen |
CSS background | Keins | Keins | Ja | Schlecht | Nur dekorative Muster |
<object> | Nur intern | Über contentDocument | Ja | Mäßig | Legacy interaktive SVGs |
Wählen Sie Inline, wenn Sie Hover-Zustände, Animation oder JS-Interaktion benötigen. Wählen Sie <img> für statische Assets, die gecacht werden sollen. Verwenden Sie CSS Background nur für Dekoration. Der <object>-Ansatz ist 2026 selten die beste Wahl.
Barrierefreiheit: role, aria-label, title, desc
SVG hat erstklassige Barrierefreiheit in der Spezifikation verankert:
<svg role="img" aria-labelledby="logoTitle logoDesc"
viewBox="0 0 120 40">
<title id="logoTitle">VectoSolve-Logo</title>
<desc id="logoDesc">Geometrisches V- und S-Monogramm in Blau-Verlauf</desc>
<path d="M10 35L30 5L50 35Z" fill="url(#grad)"/>
</svg>role="img"— teilt assistiven Technologien mit, dass es sich um ein Bild handelt<title>— der barrierefreie Name (Äquivalent zualtbei<img>)<desc>— längere Beschreibung für komplexe Grafikenaria-labelledby— verknüpft mit<title>- und<desc>-Elementenaria-hidden="true"— für rein dekorative SVGs, um sie vor Screenreadern zu verbergen
Free SVG Tools for Crafters
Design Checker · Color Separator · Mat Preview · Offset Generator · Text to SVG
Check Your SVG FreeAnimation: SMIL, CSS, JavaScript, Web Animations API
SMIL (SVGs native Animation)
<circle cx="50" cy="50" r="20" fill="#ef4444">
<animate attributeName="r" values="20;35;20" dur="1.5s" repeatCount="indefinite"/>
</circle>CSS-Animationen
Wenden Sie @keyframes, transition und transform auf SVG-Elemente an — das gleiche CSS, das Sie bereits kennen.
JavaScript-Bibliotheken
GSAP, Anime.js und Snap.svg bieten Timeline-basierte Steuerung für komplexes Pfad-Morphing und sequenzierte Animationen.
Web Animations API
Der moderne, standardbasierte Ansatz, der JS-Power mit CSS-Performance kombiniert:
element.animate(
[{ transform: 'rotate(0deg)' }, { transform: 'rotate(360deg)' }],
{ duration: 2000, iterations: Infinity }
);Pro Tip: Verwenden Sie SVG-Sprites für Icon-Systeme. Definieren Sie Icons als <symbol>-Elemente in einem einzigen versteckten SVG, referenzieren Sie jedes mit <use href="#icon-name"/>. Eine HTTP-Anfrage, volle CSS-Kontrolle, Browser-Caching. Der moderne Ersatz für Icon-Fonts — kleiner, barrierefreier, schärfer in jeder Größe.
Warning: SVG kann JavaScript ausführen. Da SVG <script>-Elemente, Event-Handler (onload, onclick) und externe Referenzen unterstützt, können nicht vertrauenswürdige SVGs ein Vektor für XSS-Angriffe sein.
Schützen Sie sich: Bereinigen Sie mit DOMPurify vor dem Inline-Einfügen, bevorzugen Sie <img>-Tags für von Benutzern hochgeladene SVGs (Browser blockieren Skripte im <img>-Kontext), setzen Sie eine strikte CSP und entfernen Sie <script>, <foreignObject> und Event-Handler bei der Upload-Verarbeitung.
Performance-Optimierung
SVGs aus Design-Tools sind aufgebläht — Editor-Metadaten, redundante Gruppen, übermäßige Dezimalpräzision.
| Optimierungsschritt | Typische Einsparung |
|---|---|
| Metadaten entfernen | 10-25% |
| Dezimalpräzision reduzieren | 15-30% |
| Gruppen zusammenführen, IDs bereinigen | 5-15% |
| GZIP/Brotli (serverseitig) | 60-75% |
| Kombiniert (vor Kompression) | 40-60% |
Wichtige Techniken: Editor-Metadaten entfernen, Koordinatenpräzision auf 1-2 Dezimalstellen reduzieren, verschachtelte <g>-Elemente abflachen, viewBox statt fester Dimensionen verwenden, GZIP/Brotli aktivieren (SVG komprimiert außergewöhnlich gut), und mit dem Optimierer von VectoSolve automatisieren.
Erste Schritte mit SVG
VectoSolve bietet KI-gestützte Tools für den kompletten SVG-Workflow:
- Raster zu Vektor konvertieren — laden Sie PNG/JPG hoch, erhalten Sie sauberes, optimiertes SVG
- Visuell bearbeiten — nutzen Sie den SVG-Editor zum Anpassen von Pfaden und Farben
- Optimieren — lassen Sie Dateien durch den Optimierer laufen, um Ballast zu entfernen
SVG ist die native Grafiksprache des Webs — offen, standardisiert, barrierefrei, animierbar und performant. 2026 ist SVG-Kompetenz keine Option. Sie ist grundlegend.
| SVG-Funktion | Browser-Unterstützung | Anwendungsfall |
|---|---|---|
| Inline SVG mit CSS/JS-Kontrolle | Alle modernen Browser (98%+) | Interaktive Icons, Animationen, Theming |
| Einbettung über <img>-Tag | Universal | Statische Logos, Illustrationen mit Caching |
| SMIL-Animation | Alle außer IE (95%+) | Deklarative SVG-Animation ohne JavaScript |
| SVG-Filter (feGaussianBlur, etc.) | Alle modernen Browser (97%+) | Weichzeichnung, Schatten, Farbmanipulation |
| Barrierefreiheit (title, desc, aria) | Screenreader + alle Browser | Inklusives Design für sehbehinderte Nutzer |
A Full Year of Conversions for $49
Starter Annual: 25 conversions every month, $49 for the whole year. That is about $4.08 a month · Cancel anytime
Get the Annual DealQuellen und weiterführende Lektüre
- MDN Web Docs: SVG — Umfassende Referenz für jedes SVG-Element, -Attribut und -API
- W3C SVG 2 Spezifikation — Der offizielle W3C-Standard, der SVG-Syntax, Rendering und Interaktivität definiert
- CSS-Tricks: Using SVG — Praktischer Leitfaden zum Einbetten, Stylen und Optimieren von SVGs im Web
- web.dev Performance — Googles Ressource zur Bildoptimierung und Core Web Vitals
- Smashing Magazine — Tiefgehende Artikel zu SVG-Barrierefreiheit, Animation und Best Practices