SVG-Dateien: Ein vollständiger Leitfaden für Entwickler und Designer

SVG ist eine dieser Technologien, die von außen einfach wirkt — es ist doch nur ein Zeichenformat, oder? — die aber tieferes Studium stärker lohnt als fast jedes andere Format im Werkzeugkasten eines Entwicklers oder Designers. SVG-Dateien skalieren unendlich ohne Qualitätsverlust, wiegen für einfache Grafiken fast nichts, können mit CSS gestaltet, mit JavaScript oder CSS-Übergängen animiert und direkt in HTML eingebettet werden. SVG richtig zu verstehen verändert die Art, wie Sie über Grafiken im Web nachdenken.

Jede SVG-Datei können Sie mit dem BrowseryTools SVG-Tool anzeigen, prüfen und optimieren — kostenlos, ohne Anmeldung, alles läuft in Ihrem Browser.

Was ist SVG?

SVG steht für Scalable Vector Graphics. Anders als JPEG, PNG oder WebP — die Bilder als Raster aus farbigen Pixeln speichern (Rastergrafiken) — speichert SVG Bilder als mathematische Beschreibungen von Formen. Ein Kreis wird als Mittelpunkt und Radius beschrieben. Ein Pfad wird als Folge von Zeichenbefehlen beschrieben: zu diesem Punkt bewegen, eine Linie zu jenem Punkt zeichnen, eine Kurve durch diese Kontrollpunkte ziehen, den Pfad schließen.

SVG ist ein XML-basiertes Format, d. h. jede SVG-Datei ist reiner Text, menschenlesbar und als Baum verschachtelter Elemente strukturiert. Öffnen Sie eine SVG-Datei in einem Texteditor und Sie sehen lesbares Markup, keinen binären Blob. Das hat erhebliche praktische Folgen: SVG-Dateien können programmatisch generiert, mit Textverarbeitungstools modifiziert, in der Versionskontrolle verglichen und direkt in HTML eingebettet werden, ohne weitere Verarbeitung.

Das Format ist ein W3C-Standard, der gemeinsam mit HTML und CSS gepflegt wird. Jeder moderne Browser hat eine vollständige SVG-Rendering-Engine eingebaut.

Warum SVG für Icons und Illustrationen Rastergrafiken überlegen ist

Der entscheidende Vorteil von SVG gegenüber Rastergrafiken für Icons, Logos und Illustrationen ist die Auflösungsunabhängigkeit. Ein mit 32×32 Pixeln erstelltes Raster-Icon wirkt auf einem Retina-Display unscharf, das mit 2× oder 3× physischen Pixeln pro CSS-Pixel rendert. Um das zu beheben, müssten Sie entweder mehrere Auflösungsvarianten exportieren (@1x, @2x, @3x), die Quellauflösung erhöhen (größere Dateien, mehr Speicher) oder image-set in CSS verwenden, um die richtige Auflösung auszuliefern. Mit SVG erstellen Sie die Grafik einmal und sie sieht bei jeder Größe, auf jedem Display, für immer perfekt aus.

Dateigröße ist der andere große Vorteil bei einfachen Grafiken. Ein einfaches Icon — ein Häkchen, ein Pfeil, ein Hamburger-Menü — lässt sich in einer SVG-Datei mit 200–500 Bytes beschreiben. Das äquivalente PNG bei 2× Retina-Auflösung könnte 2–5 KB sein. Bei 3× noch größer. Wenn eine Benutzeroberfläche 50 Icons hat, ist der Unterschied zwischen 50 optimierten SVGs (zusammen ~20 KB) und 50 PNG-Sets (zusammen ~300+ KB) bedeutsam.

Rastergrafiken gewinnen bei fotografischen Inhalten und komplexen, sehr detaillierten Illustrationen mit glatten Farbverläufen und Texturen. Eine vektorielle SVG-Darstellung eines Fotos wäre enorm und würde stilisiert statt fotografisch wirken. Das richtige Format hängt vollständig von der Art des Inhalts ab.

SVG-Anatomie: Die Kernelemente

Eine minimale SVG-Datei hat diese Struktur:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <circle cx="12" cy="12" r="10" fill="#3b82f6" />
  <path d="M8 12 L12 16 L16 8" stroke="white" stroke-width="2" fill="none" />
</svg>

Die wichtigsten Elemente und Attribute:

• viewBox — definiert das interne Koordinatensystem. viewBox="0 0 24 24" bedeutet, der Zeichenraum reicht von (0,0) bis (24,24). Das SVG kann dann in jeder tatsächlichen Größe gerendert werden — 16×16, 32×32, 200×200 — und der Browser skaliert das Koordinatensystem entsprechend. Das ist der Mechanismus hinter der Auflösungsunabhängigkeit.
• path — das mächtigste SVG-Element. Ein d-Attribut enthält Zeichenbefehle: M (move to), L (line to), C (cubic bezier curve), A (arc), Z (close path). Fast jede Form lässt sich als Pfad ausdrücken.
• circle, rect, ellipse, line, polygon — Hilfs-Elemente für häufige Formen. Ein <circle> nimmt cx, cy und r. Ein <rect> nimmt x, y, width und height, plus optional rx für abgerundete Ecken.
• text — SVG kann typografischen Text rendern, der mit dem Bild skaliert und auswählbar sowie barrierefrei bleibt, anders als in ein Rasterbild gerenderter Text.
• g (Gruppe) — gruppiert Kindelemente zusammen, sodass Transformationen, Stile und Deckkraft auf die gesamte Gruppe auf einmal angewendet werden können.
• defs und use — wiederverwendbare Elemente einmalig definieren und mehrfach mit <use> referenzieren. Unverzichtbar für Icon-Systeme, die ein einzelnes SVG-Sprite verwenden.

SVG mit CSS gestalten und animieren

SVG-Elemente sind Teil des DOM, wenn SVG in HTML eingebettet ist. Das bedeutet, CSS kann sie direkt mit denselben Selektoren ansprechen, die für HTML-Elemente verwendet werden. Sie können Füllfarben, Strichbreiten und Deckkraft beim Hovern, im Dunkelmodus oder als Reaktion auf jede Zustandsänderung anpassen:

/* Target SVG elements with CSS */
.icon-check circle {
  fill: #22c55e;
  transition: fill 0.2s ease;
}

.icon-check:hover circle {
  fill: #16a34a;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .icon-check circle { fill: #4ade80; }
}

CSS-Animationen und -Übergänge funktionieren bei SVG-Eigenschaften. Der stroke-dasharray- und stroke-dashoffset-Trick — einen Pfad durch Manipulation des sichtbaren Teils eines gestrichelten Strichs von unsichtbar zu sichtbar zu animieren — erzeugt den „Zeicheneffekt", der auf vielen Ladebalken und Onboarding-Illustrationen zu sehen ist. SVG hat auch eigene <animate>- und <animateTransform>-Elemente (SMIL-Animation), aber CSS- und JavaScript-Animationen sind für die Wartbarkeit generell vorzuziehen.

Die Verwendung von currentColor als Füllwert lässt ein SVG-Icon automatisch die Textfarbe seines übergeordneten Elements übernehmen und ermöglicht so einem einzelnen Icon, sich ohne Modifikation an jeden Farbkontext anzupassen.

SVG-Optimierung mit SVGO

SVG-Dateien, die aus Design-Tools wie Figma oder Illustrator exportiert wurden, enthalten viel unnötigen Ballast: Editor-Metadaten, redundante Attribute, Gruppencontainer ohne Wirkung, Gleitkommakoordinaten mit acht Dezimalstellen, id-Attribute, die vom internen Node-System des Design-Tools generiert wurden. Bei einem einfachen Icon kann dieser Overhead die Dateigröße im Vergleich zu einer handoptimierten Version verdreifachen oder -vervierfachen.

SVGO (SVG Optimizer) ist das Standardwerkzeug zum Entfernen dieses Overheads. Es wendet eine konfigurierbare Reihe von Transformationen an: verschachtelte Gruppen zusammenführen, unsichtbare Elemente entfernen, Koordinaten auf vernünftige Präzision runden, redundante Pfade zusammenführen, Metadaten und Kommentare entfernen und mehr. Ein typischer SVGO-Durchgang reduziert die SVG-Dateigröße bei Icons um 30–60 % ohne sichtbare Änderung.

Das BrowseryTools SVG-Tool wendet SVG-Optimierung in Ihrem Browser an und liefert Ihnen das optimierte Ergebnis, ohne Befehlszeilen-Tools installieren zu müssen.

Inline-SVG vs. externe Datei vs. CSS-Hintergrundbild

Es gibt drei Hauptmethoden, ein SVG in eine Webseite einzubinden, jede mit anderen Kompromissen:

• Inline-SVG — das SVG-Markup ist direkt in den HTML-Code eingebettet. Gibt vollen CSS- und JavaScript-Zugriff auf jedes Element innerhalb des SVG. Am besten für Icons, die Hover-Effekte, Farbänderungen oder Animationen benötigen. Kann nicht separat vom Browser gecacht werden.
• Externe SVG-Datei via <img> — das SVG ist eine separate Datei, die mit <img src="icon.svg"> referenziert wird. Der Browser kann die Datei cachen. Einfach zu verwenden. Aber CSS der übergeordneten Seite kann nicht ins SVG hineinreichen, und JavaScript kann seinen Inhalt nicht manipulieren.
• CSS background-image — das SVG wird als CSS-Hintergrundbild referenziert. Funktioniert für rein dekorative Grafiken. Das SVG kann auch als Data-URI in CSS eingebettet werden, nützlich für kleine Icons in Komponenten-Stylesheets. CSS kann Elemente innerhalb des SVG nicht neu gestalten.

SVG-Sprite-Sheets — eine einzige SVG-Datei mit allen Icons, die in <defs>-Blöcken definiert und mit <use href="sprite.svg#icon-name"> referenziert werden — bieten eine gute Balance: eine cachefähige Netzwerkanfrage für alle Icons, mit DOM-Manipulation pro Icon in den meisten modernen Browsern möglich.

Häufige SVG-Fallstricke: XSS via SVG

SVG unterstützt eingebettete Skripte, Event-Handler und externe Ressourcenreferenzen, was es zu einem möglichen Angriffsvektor für Cross-Site-Scripting (XSS) macht, wenn vom Nutzer hochgeladene SVG-Dateien in einem Browser-Kontext angezeigt werden. Eine SVG-Datei mit <script>alert(document.cookie)</script> führt dieses Skript aus, wenn der Browser das SVG als Teil einer Seite rendert.

Die Regeln für den sicheren Umgang mit vom Nutzer hochgeladenen SVGs:

• Betten Sie vom Nutzer hochgeladene SVGs niemals direkt in Ihren HTML-Code ein. Betten Sie nur SVGs ein, die Sie selbst kontrollieren.
• Wenn Sie vom Nutzer hochgeladene SVGs anzeigen müssen, liefern Sie sie von einem separaten, sandgeboxten Ursprung und zeigen Sie sie in einem <img>-Tag oder einem sandgeboxten <iframe> an. Das <img>-Tag führt keine Skripte im SVG aus.
• Bereinigen Sie vom Nutzer hochgeladene SVGs, indem Sie sie durch einen Sanitizer laufen lassen (DOMPurify mit der SVG-Konfiguration), bevor Sie sie speichern oder anzeigen.
• Setzen Sie den Content-Security-Policy-Header, um Skriptquellen auf Seiten zu beschränken, die SVGs anzeigen.

SVG in PNG konvertieren

Einige Kontexte unterstützen kein SVG: ältere E-Mail-Clients, bestimmte CMS-Plattformen, manche Bildverarbeitungs-Pipelines, App-Icon-Anforderungen für iOS und Android und Open-Graph-Vorschaubilder. In diesen Fällen müssen Sie das SVG als gerasterte PNG-Datei exportieren.

Da SVG verlustfrei skaliert, können Sie in jeder Größe in PNG exportieren. Für App-Icons bedeutet das, eine einzelne SVG-Quelle bei 1024×1024 zu exportieren und alle kleineren Größen davon abzuleiten. Für Retina-Webnutzung: bei 2× oder 3× der CSS-Anzeigegröße exportieren.

Das BrowseryTools SVG-Tool kann SVG in der von Ihnen gewählten Auflösung in PNG rendern und die Konvertierung im Browser durchführen, ohne Dateien auf einen Server hochzuladen. Nützlich, wenn Sie ein SVG aus einem Design-Tool haben und ein PNG für einen Kontext benötigen, der kein SVG akzeptiert.