SVG

Definition: SVG (Scalable Vector Graphics) ist ein auf XML basierendes W3C-Format zur Beschreibung zweidimensionaler Vektorgrafiken. Im Gegensatz zu Pixel-Formaten (JPEG, PNG, WebP) verlieren SVG-Grafiken bei beliebiger Vergrößerung keinerlei Qualität – auf Retina-Displays (2×/3× DPR) immer scharf, ohne größere Dateien. SVG-Dateien sind textbasiert und können direkt als Inline-Code in HTML eingebettet werden, was CSS-Styling, JavaScript-Manipulation, CSS-Animationen und Interaktivität ermöglicht. SVG profitiert stark von Gzip/Brotli-Komprimierung (textbasiertes Format). Ideal für Logos, Icons, Illustrationen, Data Visualizations und animierte Marketing-Grafiken. Als externe Datei via <img src="logo.svg"> eingebunden verliert SVG die JavaScript/CSS-Manipulierbarkeit.

Erläuterung

SVG ist das einzige Web-Bildformat das direkt mit CSS gestylt und mit JavaScript manipuliert werden kann – das macht es zum Standard für Icons und Logos. Ein Icon-Font (wie Font Awesome) hat 100–400 KB für Tausende Icons; ein SVG-Sprite nur die tatsächlich verwendeten Icons. Für Logos: Ein PNG-Logo für Retina benötigt 2× Auflösung = 4× Dateigröße; ein optimiertes SVG ist oft 3–10 KB und immer scharf.

SVG-Einbindungsformen

Inline-SVG: SVG-Code direkt im HTML; <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="..."></svg>; vollständige CSS- und JavaScript-Kontrolle; CSS: fill: currentColor erbt Textfarbe des Eltern-Elements; kein separater HTTP-Request; Nachteil: kein Browser-Caching; für Icons und animierte Grafiken empfohlen
Als img-Tag: <img src="logo.svg" alt="Firmenname Logo">; Browser-Caching möglich; kein CSS/JS-Zugriff auf SVG-Interne; skaliert verlustfrei; kein Inline-Overhead im HTML; für statische Logos und Illustrationen geeignet
Als CSS background-image: background-image: url('icon.svg'); gut für dekorative Grafiken; keine Zugänglichkeit (kein alt-Text); für Icon-Hintergründe in Buttons und Pseudo-Elementen; kein CSS-Farbzugriff auf SVG-Inhalte
SVG-Sprite: Alle Icons in einer SVG-Datei via <symbol>-Elementen; Verwendung: <svg><use href="sprite.svg#icon-search"></use></svg>; ein HTTP-Request für alle Icons; Browser-Cacheable; guter Kompromiss zwischen Performance und Wartbarkeit

SVG-Optimierung

SVGO: Standard-Tool zur SVG-Optimierung; entfernt Metadaten (Adobe/Figma-Editor-Daten), überflüssige Attribute, leere Gruppen; reduziert SVG-Dateigröße um 30–70 %; npx svgo input.svg -o output.svg; als Build-Schritt integrieren; vite-plugin-svgo, svg-loader für automatische Optimierung
viewBox vs. width/height: viewBox="0 0 24 24" ermöglicht beliebige Skalierung via CSS; width/height als feste Pixel sperrt Größe; immer viewBox verwenden statt fester Dimensionen; CSS: svg { width: 100%; height: auto; } für responsive Skalierung
currentColor: fill="currentColor" im SVG-Pfad; Icon erbt CSS-Farbe des umgebenden Elements; ermöglicht Icon-Farbwechsel via color: blue; in CSS ohne JavaScript; Standard für Icon-Systeme; funktioniert nur bei Inline-SVG oder SVG-Sprites via use
Komplexe Grafiken: Bei sehr komplexen SVGs (detaillierte Illustrationen, viele Pfade): PNG/WebP oft kleiner als SVG; SVG für einfache Geometrie und Icons; JPEG/WebP für Fotos und komplexe Rasterbilder; Entscheidung: Dateigröße von beiden vergleichen

Zugänglichkeit und SEO

Zugänglichkeit: Inline-SVG: <title>Suchicon</title> + <desc>Lupe Symbol</desc> + aria-labelledby="title desc"; dekoratives SVG: aria-hidden="true"; img-Tag: alt="Beschreibung"; role="img" für Inline-SVGs die Bedeutung tragen; Screen-Reader lesen SVG-title als Alternative zu img-alt
SEO: Google indexiert SVG-Dateiinhalte grundsätzlich; Text in SVG-text-Elementen kann gecrawlt werden; title-Element im SVG für SEO-relevanten Kontext; für Logos: <img> oder Inline-SVG mit strukturierten Daten (Organization logo) bevorzugt
Animation: CSS-Animation auf SVG-Elementen: animiert fill, stroke, transform; SMIL-Animation (veraltet; nicht mehr empfohlen); Lottie für komplexe After Effects-basierte SVG-Animationen (10–50 KB statt GIF mit Megabytes); CSS-Animationen für einfache Hover-Effekte und Laden-Indikatoren

Praxistipp: Ersetzen Sie alle Icon-Fonts (Font Awesome, Material Icons) durch ein SVG-Sprite-System: Nur die tatsächlich verwendeten Icons werden geladen statt einer vollständigen Icon-Font-Datei. Optimieren Sie alle SVGs mit SVGO bevor sie ins Deployment gehen – das ist ein einmaliger Build-Schritt der 30–70 % Dateigröße einspart. Für alle Logos: SVG statt PNG verwenden, da SVG auf Retina-Displays und in Browser-Tabs immer scharf ist und oft kleiner als ein optimiertes PNG-2x. Testen Sie das Logo via Lighthouse «Images-Auditierung» – SVG-Logos erscheinen dort nicht als Optimierungskandidat (kein Format-Hinweis), was korrekt ist.