SVG-Format: Der vollständige technische Leitfaden
Was ist SVG
SVG (Scalable Vector Graphics) ist ein vektorbasiertes Bildformat auf XML-Basis, standardisiert vom W3C 2001. Anders als Raster-Bilder (JPG, PNG, WebP) die einzelne Pixel speichern, beschreibt SVG Grafiken mathematisch — Punkte, Linien, Kurven, Formen — was unendliches Skalieren ohne Qualitätsverlust ermöglicht.
Fundamentale Vorteile
- Unendliche Skalierung ohne Verlust: gleiche Qualität bei 16×16 oder 4096×4096 Pixeln
- Kleine Dateigröße: einfache Grafiken belegen KBs (nicht MBs)
- Editierbar als Code: SVG ist XML-Text — kann in jedem Editor bearbeitet werden
- Mit CSS/JavaScript animierbar: SVG unterstützt native Animationen
- Barrierefreiheit: semantische Struktur ermöglicht Screenreader
- Suchbar: Text in SVG wird von Google indexiert
- Mit CSS stylbar: Farben, Striche, Opazität über CSS ändern
Wann SVG verwenden
- Logos: vektor garantiert Qualität in jeder Größe/Gerät
- Icons: ersetzte Icon-Schriften (Font Awesome → SVG-Icons)
- Einfache Illustrationen: Grafiken mit Linien, Formen, Text
- Diagramme: Flowcharts, Karten, Grafiken
- Moderne Web-Interfaces: Standard für moderne UI
- Druck: vektor garantiert Qualität bei jeder DPI
Wann KEIN SVG verwenden
- Fotografien: SVG ist nicht effizient für fotografischen Inhalt (verwenden Sie JPG/WebP/AVIF)
- Bilder mit komplexen Gradienten: SVG-Dateien werden groß
- Legacy-Plattformen: einige alte Systeme unterstützen es nicht (verwenden Sie PNG-Fallback)
- Email: Email-Clients haben begrenzte SVG-Unterstützung (verwenden Sie PNG)
Grundstruktur
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="red" />
<text x="50" y="55" text-anchor="middle">Hallo</text>
</svg>
Dieses SVG erzeugt einen roten Kreis mit dem Text "Hallo". Die viewBox definiert das Koordinatensystem — skaliert automatisch.
Optimierung
Aus Illustrator/Figma exportierte SVGs haben oft unnötige Metadaten. Tools wie SVGO (SVG Optimizer) reduzieren die Größe um 30-70% ohne visuellen Verlust:
svgo input.svg -o output.svg
SVG vs Raster
| Aspekt | SVG | Raster (PNG/JPG) |
|---|---|---|
| Skalierung | Unendlich | Feste Pixel |
| Größe (Logos) | Klein (KB) | Mittel (KB-MB) |
| Größe (Fotos) | Riesig wenn komplex | Optimiert |
| Bearbeitung | Wie Code | Bildbearbeiter |
| Animation | Nativ | Begrenzt (GIF/WebP) |
| Barrierefreiheit | Exzellent | Begrenzt (alt-text) |
Konvertierung
KaijuConverter konvertiert SVG zu PNG/JPG wenn Sie Raster brauchen (Legacy-Kompatibilität, Email, soziale Netzwerke). Umgekehrt (PNG → SVG) ist schwieriger — funktioniert für einfache Grafiken aber scheitert bei Fotografien.
Schlussfolgerung
SVG ist 2026 der moderne Standard für Logos, Icons und Illustrationen. Verwenden Sie SVG immer wenn Inhalt vektor ist (Grafiken mit Linien/Formen). Verwenden Sie Raster (JPG/WebP/AVIF) für Fotografien. In manchen Fällen verwenden Sie <picture>-Kaskade mit primärem SVG + PNG-Fallback für maximale Kompatibilität.
Verwandte Konvertierungen
Beim Arbeiten mit Bildern sind diese Konvertierungsrichtungen am häufigsten: