SVG vs Rasterbilder: Den Unterschied verstehen

Bei der Arbeit mit digitalen Bildern im Web kann die Wahl zwischen SVG (Scalable Vector Graphics) und Rasterformaten (PNG, JPEG, WebP) die Leistung, visuelle Qualität und Benutzererfahrung Ihrer Website erheblich beeinflussen.

Was sind Vektorgrafiken (SVG)?#

SVG (Scalable Vector Graphics) ist ein XML-basiertes Vektorbildformat, das Grafiken mit mathematischen Gleichungen und geometrischen Formen wie Punkten, Linien, Kurven und Polygonen definiert.

Wie SVG funktioniert#

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="#3B82F6" />
  <rect x="30" y="30" width="40" height="40" fill="#10B981" />
</svg>

Hauptmerkmal: SVG speichert Anweisungen zum Zeichnen des Bildes, nicht die tatsächlichen Pixel.

Was sind Rastergrafiken?#

Rasterbilder (auch Bitmap-Bilder genannt) bestehen aus einem festen Pixelraster, wobei jedes Pixel spezifische Farbinformationen enthält.

Gängige Formate:

• PNG: Verlustfreie Komprimierung, unterstützt Transparenz
• JPEG: Verlustbehaftete Komprimierung, keine Transparenz, gut für Fotos
• WebP: Modernes Format, verlustbehaftet und verlustfrei, kleiner als PNG/JPEG
• GIF: Begrenzte Farben (256), unterstützt Animation

Grundlegende Unterschiede Vergleich#

Vorteile von SVG#

1. Unendliche Skalierbarkeit#

SVG-Bilder können auf jede Größe ohne Qualitätsverlust skaliert werden.

<!-- Dieselbe SVG-Datei für verschiedene Größen -->
<img src="logo.svg" width="32" />   <!-- Favicon -->
<img src="logo.svg" width="200" />  <!-- Kopfzeile -->
<img src="logo.svg" width="1200" /> <!-- Hero-Banner -->

2. Kleine Dateigröße für einfache Grafiken#

Einfacher Icon-Vergleich:

SVG: 800 Bytes
PNG (24×24): 2 KB
PNG (48×48): 6 KB
PNG (96×96): 18 KB

3. Textbasiert und bearbeitbar#

<!-- Farbe von Blau zu Rot ändern -->
<circle fill="#3B82F6" />  <!-- Vorher (blau) -->
<circle fill="#EF4444" />  <!-- Nachher (rot) -->

4. CSS- und JavaScript-Manipulation#

<svg class="icon">
  <path class="icon-path" d="..." />
</svg>
 
<style>
.icon-path {
  fill: currentColor;
  transition: fill 0.3s;
}
 
.icon:hover .icon-path {
  fill: #3B82F6;
}
</style>

5. Barrierefreiheitsunterstützung#

<svg role="img" aria-labelledby="icon-title">
  <title id="icon-title">Startseiten-Symbol</title>
  <desc>Ein hausförmiges Symbol, das die Startseite darstellt</desc>
  <path d="..." />
</svg>

Nachteile von SVG#

1. Nicht geeignet für komplexe Bilder#

Foto (3000×2000):

JPEG: 250 KB (komprimiert)
SVG: 5-15 MB (wenn nachgezeichnet, unbrauchbare Dateigröße)

2. Leistungsprobleme bei komplexen Grafiken#

Komplexe SVGs mit Tausenden von Pfaden können das Rendering verlangsamen.

Faustregel: Wenn Ihre SVG-Datei über 100 KB groß ist, ziehen Sie ein Rasterformat in Betracht.

3. Begrenzte Browser-Effekte#

Einige visuelle Effekte sind in reinem SVG schwierig oder unmöglich:

• Realistische Schatten und Beleuchtung
• Foto-Filter (Weichzeichnen, Rauschen)
• Textur-Mapping

4. Lernkurve#

Das Verständnis von SVG erfordert Kenntnisse in:

• XML-Syntax
• Koordinatensysteme (viewBox, Koordinatentransformationen)
• Pfadbefehle (M, L, C, Q, A, Z)

Vorteile von Rasterbildern#

1. Perfekt für Fotografien#

Foto (1920×1080):
JPEG (Qualität: 85): 150 KB
PNG: 1.8 MB
WebP: 95 KB

2. Vorhersagbares Rendering#

Was Sie in Photoshop sehen, wird genau so in Browsern gerendert.

3. Breite Software-Unterstützung#

Jeder Bildeditor unterstützt Rasterformate.

4. Besser für komplexe visuelle Effekte#

Effekte, die in Rastern einfach, in SVG schwierig sind:

• Gaußscher Weichzeichner
• Realistische Schlagschatten
• Textur-Überlagerungen
• Foto-Filter

5. Komprimierungsoptionen#

WebP-Vergleich:

PNG: 1.2 MB
JPEG (90% Qualität): 180 KB
WebP (verlustfrei): 650 KB
WebP (verlustbehaftet, 90% Qualität): 85 KB

Nachteile von Rasterbildern#

1. Skalierungsprobleme#

Vergrößern: Pixelierung und Unschärfe Verkleinern: Verschwendete Bandbreite

2. Mehrere Dateien für responsives Design#

<img
  src="icon-1x.png"
  srcset="icon-1x.png 1x, icon-2x.png 2x, icon-3x.png 3x"
  alt="Symbol"
/>

3. Größere Dateigrößen für einfache Grafiken#

SVG: 1.2 KB
PNG (200×200): 8 KB
PNG (500×500): 45 KB

Wann SVG verwenden#

✅ Icons und UI-Elemente ✅ Logos und Branding ✅ Diagramme und Grafiken ✅ Illustrationen und Zeichnungen ✅ Animationen ✅ Responsive Grafiken ✅ Druckmaterialien

Wann Rasterbilder verwenden#

PNG:#

• Screenshots
• Transparente Bilder
• Bilder mit Text
• Pixel Art

JPEG:#

• Fotografien
• Komplexe Verläufe
• Große Hintergrundbilder

WebP:#

• Moderner Ersatz für PNG und JPEG
• 25-35% kleiner als JPEG
• Unterstützt Transparenz

Hybrid-Ansatz#

<!-- Logo: SVG -->
<img src="logo.svg" alt="Firmenlogo" />
 
<!-- Produktfoto: JPEG/WebP -->
<picture>
  <source srcset="product.webp" type="image/webp" />
  <img src="product.jpg" alt="Produktfoto" />
</picture>
 
<!-- Icons: SVG -->
<svg class="icon-cart"><use href="icons.svg#cart" /></svg>

Optimierungs-Best Practices#

SVG-Optimierung#

# Reduziert die Dateigröße um 30-70%
npx svgo input.svg -o output.svg

Rasterbild-Optimierung#

# JPEG-Optimierung
jpegoptim --max=85 image.jpg
 
# PNG-Optimierung
optipng -o7 image.png
 
# WebP-Konvertierung
cwebp -q 85 image.jpg -o image.webp

Fazit#

Wählen Sie SVG wenn:

• ✅ Einfache Formen und Pfade
• ✅ Skalierbarkeit erforderlich
• ✅ Kleine Dateigröße ist wichtig
• ✅ CSS/JS-Manipulation gewünscht

Wählen Sie Raster wenn:

• ✅ Fotografien oder realistische Bilder
• ✅ Komplexe visuelle Effekte erforderlich
• ✅ Bild bereits im Rasterformat vorliegt

Durch das Verständnis der Stärken und Schwächen jedes Formats können Sie fundierte Entscheidungen treffen, die visuelle Qualität, Dateigröße und Benutzererfahrung in Einklang bringen.