SVG fürs Web optimieren: SVGO, Presets & Best Practices

SVG-Optimierung: Minify vs. SVGO-Presets (safe, default, aggressive), Figma-Exports bereinigen, Icons 30–70 % kleiner — ohne sichtbaren Qualitätsverlust.

02.03.2026

10 Min. Lektüre

Teilen Sie diesen Artikel:

SVG

Optimierung

Minimierung

Leistung

Bilder

Web

Anleitung

Warum sollten Sie Ihre SVG-Dateien optimieren und verkleinern?

SVG eignet sich ideal für Symbole, Logos und responsive Illustrationen. Exporte aus Designtools enthalten jedoch normalerweise unnötige Metadaten, redundante Attribute und ausführliche Pfaddaten. Durch die schnelle Minimierung werden Leerzeichen und Kommentare entfernt. Die tiefgreifende SVGO-Optimierung geht noch weiter. Beginnen Sie mit unserem Online-SVG-Minifier für eine schnelle Bereinigung und verwenden Sie dann optimize SVG (SVGO) für Produktionsvoreinstellungen – durchsuchen Sie die vollständige SVG-Tools-Hub. Kombinieren Sie es mit dem HTML-Minifier für Inline-SVG. Für umfassendere Auswirkungen auf die Leistung lesen Sie auch unseren Leitfaden zur Minimierung von Core Web Vitals.

30–70 % Reduzierung der SVG-Größe, je nach Komplexität

Besseres LCP auf Seiten mit Heldenlogos und Illustrationen

Geringere Bandbreite und schnelleres Laden von Mobilgeräten

Sauberer SVG-Code, der einfacher zu warten ist

Verbesserte Lighthouse-Bildressourcenbewertungen

Auswirkungen auf die Leistung in der Praxis

Realer Fall: E-Commerce-Icon-Set

Optimierungsergebnisse für einen Satz von 120 SVG-Symbolen, die auf Kategorie- und Produktseiten verwendet werden.

Vorher-Nachher-Vergleich der SVG-Optimierung für einen Symbolsatz

Before optimization

File size:620 KB

Load time:420 ms

After optimization

File size:248 KB

Load time:250 ms

Auswirkungen auf die Core Web Vitals

Kleinere SVG-Assets reduzieren die Übertragungskosten und beschleunigen das Rendern kritischer Elemente.

LCP: 120–350 ms Verbesserung, abhängig von der Größe der Heldenillustration

INP: Weniger CPU-Arbeit zum Parsen umfangreicher Inline-SVG

CLS: Keine negativen Auswirkungen bei Beibehaltung der Abmessungen

TBT: geringere Spitzen auf SVG-lastigen Seiten

Mobile UX: Stabileres Laden in 3G/4G-Netzwerken

Best Practices für die SVG-Produktion

Checkliste vor der Veröffentlichung

Verwenden Sie diese Routine, um Ihre SVG-Assets kompakt und zuverlässig zu halten.

Behalten Sie viewBox immer für ein reaktionsfähiges Rendering bei

Begrenzen Sie die Dezimalgenauigkeit des Pfads (normalerweise 2–3 Dezimalstellen).

Entfernen Sie ausgeblendete Ebenen und nicht verwendete Gruppen

Vermeiden Sie das Inlining großer, unkritischer SVG-Dateien

Testen Sie das Rendering auf Mobil- und Retina-Bildschirmen

Version lesbarer Quell-SVG, minimierte Ausgabe bereitstellen

Häufige Fehler, die es zu vermeiden gilt

Minimieren Sie für Inline-SVG den Container mit dem HTML-Minifier und optimieren Sie verwandte Stile mit dem CSS-Minifier. Wenn Sie nicht lesbaren SVG-Code überprüfen müssen, verwenden Sie zuerst den Verschönerungsmodus oder den Entminifizierungsmodus und optimieren Sie ihn dann erneut.

Versehentliches Entfernen von viewBox und Beeinträchtigung der Reaktionsfähigkeit

Animiertes SVG blind verkleinern, ohne visuelle Regressionsprüfungen

Ausführliche ungenutzte IDs beibehalten

Barrierefreiheitsattribute (Titel, Rolle, Aria-Label) löschen

SVG-Größenbudgets werden in CI nicht verfolgt

Anatomie der SVG-Optimierung

Vor und nach der SVG-Minifizierung

Durch die SVG-Minimierung werden nicht wesentliche Elemente entfernt, während die visuelle Ausgabe erhalten bleibt.

Before

<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg" version="1.1" id="Layer_1">
  <!-- Exportiert aus Illustrator -->
  <metadata>Erstellt mit Design Tool X</metadata>
  <g id="Icon_Group" fill="#1d4ed8" fill-opacity="1.000000" Stroke="none">
    <path d="M 10.0000 10.0000 L 110.0000 10.0000 L 110.0000 110.0000 L 10.0000 110.0000 Z" />
  </g>
</svg>

// ~430 Bytes

After

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><path fill="#1d4ed8" d="M10 10h100v100H10z"/></svg>

// ~150 Bytes (ca. 65 % Reduzierung)

Was wird entfernt bzw. was bleibt erhalten?

Das Ziel besteht darin, Bytes zu sparen, ohne die visuelle Darstellung oder Zugänglichkeit zu beeinträchtigen.

ENTFERNT: Editor-Metadaten (Illustrator, Figma, Inkscape)

ENTFERNT: Kommentare und zusätzliche Leerzeichen

ENTFERNT: redundante Standardattribute

OPTIMIERT: Pfad-Dezimalgenauigkeit

ERHALTEN: viewBox, Semantik und Rendering

ERHALTEN: nützliche Barrierefreiheits-Tags (Titel, Beschreibung)

Schnelle Methode: FastMinify SVG Optimizer

Optimieren Sie ein SVG in 3 Schritten

Der schnellste Weg ist die schnelle Minimierung mit unserem Online-SVG-Minifier. Wechseln Sie für SVGO-Voreinstellungen (sicher, standardmäßig, aggressiv) zu SVG optimieren – siehe SVG-Tools-Hub.

FastMinify-Schnittstelle zur SVG-Optimierung und -Minifizierung

Schritt 1: Fügen Sie Ihre SVG-Datei ein oder importieren Sie sie

Fügen Sie Ihren rohen SVG-Code hinzu oder importieren Sie eine Datei in den Editor.

Schritt 2: Optimierung durchführen

Klicken Sie auf „Minimieren“, um Metadaten, Leerzeichen und redundante Attribute zu entfernen.

Schritt 3: Kopieren Sie das Ergebnis

Verwenden Sie das optimierte SVG in Ihrer Build-Pipeline oder Ihrem CMS.

Nützliche Funktionen für Webteams

Sie können auch in den Verschönerungs-/Entminifizierungsmodus wechseln, um eine komplexe SVG-Datei zu prüfen, und dann zur kompakten Ausgabe für die Produktion zurückkehren.

Sofortige clientseitige Optimierung

Kein Server-Upload für sensible Assets

Verschönerungs-/Entminifizierungsmodus für schnelles Debuggen

Kopieren mit einem Klick zur Implementierung

Funktioniert für Inline-SVG- und externe Dateien

Programmatische SVG-Optimierung

SVGO (Node.js) für CI/CD

SVGO ist das Standardtool zur Automatisierung der SVG-Optimierung in Frontend-Pipelines.

Basic example

{optimiere} aus 'svgo' importieren

const svg = `<svg xmlns="http://www.w3.org/2000/svg">...</svg>`
const Ergebnis = optimieren(svg, {
  Multipass: wahr,
  Plugins: ['preset-default']
})

console.log(result.data)

File minification

{optimiere} aus 'svgo' importieren
fs von „node:fs“ importieren

const input = fs.readFileSync('icon.svg', 'utf8')
const { data } = optimize(input, {
  Pfad: 'icon.svg',
  Multipass: wahr,
  Plugins: [
    'Voreinstellung-Standard',
    { name: 'cleanupIds', params: { minify: true } },
    { Name: 'removeDimensions', aktiv: false }
  ]
})

fs.writeFileSync('icon.min.svg', Daten)
console.log('Optimiertes SVG in icon.min.svg geschrieben')

Empfohlene Konfiguration

Dieses Setup behält logische Dimensionen (viewBox) bei und optimiert die Pfaddaten aggressiv.

Configuration

Standard exportieren {
  Multipass: wahr,
  js2svg: { indent: 0, Pretty: false },
  Plugins: [
    'Voreinstellung-Standard',
    { name: 'convertPathData', params: { floatPrecision: 2 } },
    { Name: 'sortAttrs', aktiv: true },
    { Name: 'removeViewBox', aktiv: false }
  ]
}

Usage

# npm
auto_svgo() {
  npx svgo -f src/assets/svg -o public/assets/svg
}

# Beispiel-Build-Hook
npm run optimize:svg && npm run build

Inline-SVG vs. externe Datei

Das Inlining kritischer SVG-Dateien kann beim „Above-the-Fold“-Rendering hilfreich sein. Andernfalls bevorzugen Sie zwischenspeicherbare Dateien. Kombinieren Sie für Inline-SVG die HTML-Minifizierung über FastMinify.

Abschluss

Die SVG-Optimierung ist einer der schnellsten Leistungsgewinne, die Sie erzielen können: weniger Bytes, schnelleres Rendering und bessere Benutzererfahrung ohne Einbußen bei der visuellen Qualität. Kombinieren Sie ein Online-Tool für schnelle Einzelaufgaben mit der SVGO-Automatisierung in Ihrer Pipeline, um die Gewinne zu skalieren.

Optimieren Sie Ihre SVG-Dateien jetzt kostenlos

Verwenden Sie FastMinify für schnelle SVG-Optimierungsaufgaben

Automatisieren Sie SVGO in Ihrer CI/CD-Pipeline

Behalten Sie viewBox bei, um die Reaktionsfähigkeit beizubehalten

Führen Sie nach jeder Optimierung visuelle Kontrollen durch

Kombinieren Sie optimiertes SVG mit minimiertem HTML/CSS für maximale Gewinne

Teilen Sie diesen Artikel