SVG-Optimierer
-
Original Size
-
Optimized Size
-
Savings
Warum SVG-Dateien optimieren?
SVG-Dateien, die aus Illustrator, Figma oder Inkscape exportiert wurden, enthalten viele unnötige Daten — Kommentare, Editor-Metadaten, redundante Attribute, zu präzise Dezimalzahlen und leere Container. Diese Elemente blähen die Dateigröße um 30-70% auf, ohne visuellen Nutzen. Optimierte SVGs laden schneller, verbrauchen weniger Bandbreite und können sauberer in HTML eingebettet werden.
8 Optimierungsstrategien
Aktivieren/deaktivieren Sie jeden Optimierungsdurchlauf individuell für präzise Kontrolle über das Entfernte
Größenreduzierungs-Statistiken
Sehen Sie Originalgröße, optimierte Größe und Einsparprozentsatz nach jeder Optimierung
Verlustfreie Optimierung
Alle Optimierungen bewahren das visuelle Erscheinungsbild des SVG — nur unsichtbare Metadaten werden entfernt
SVG in 3 Schritten optimieren
SVG-Code einfügen
Kopieren Sie den SVG-Quellcode aus Ihrem Design-Tool oder Ihrer Datei und fügen Sie ihn ein
Optimierungen wählen
Wählen Sie anzuwendende Optimierungsoptionen — oder verwenden Sie die Standardoptionen für maximale Reduzierung
Kopieren und deployen
Kopieren Sie das optimierte SVG und ersetzen Sie Ihre Originaldatei oder betten Sie es direkt in HTML ein
SVG-Optimierungs-Anwendungsfälle
Icon-Bibliotheken
Optimieren Sie aus Figma oder Illustrator exportierte Icon-Sets vor dem Bündeln in eine Bibliothek
Logos
Bereinigen Sie exportierte SVG-Logos für Website-Header, Favicons und Marken-Assets
Animierte SVGs
Reduzieren Sie die Basisgröße animierter SVGs, die aufgrund von Animationsdaten bereits größer sind
PWA und Mobile
Kleinere SVGs reduzieren den mobilen Datenverbrauch und verbessern Lighthouse-Performance-Scores
SVG-Optimierungs-Best-Practices
✓ Vorsicht beim ID-Entfernen bei CSS-Animationen
Wenn Ihr SVG CSS-Animationen oder JavaScript verwendet, das Element-IDs anspricht, deaktivieren Sie 'IDs entfernen' um Animationen nicht zu zerstören.
✓ viewBox behalten, Breite/Höhe entfernen
Das Entfernen von Breite/Höhe-Attributen und das Behalten von viewBox macht SVGs via CSS responsiv — der beste Ansatz für responsives Design.
✓ Zahlen auf 2 Dezimalstellen runden
Pfadkoordinaten mit 5+ Dezimalstellen sind visuell nicht wahrnehmbar. Das Runden auf 2 Dezimalstellen reduziert die Dateigröße ohne erkennbaren visuellen Unterschied.
✓ SVGO in CI/CD automatisieren
Für große Projekte integrieren Sie SVGO in Ihre Build-Pipeline, um alle SVGs automatisch zu optimieren. Verwenden Sie dieses Tool für schnelle manuelle Prüfungen.
❓ Häufig gestellte Fragen
Um wie viel kann SVG-Optimierung die Größe reduzieren?
Typischerweise 30-70% Reduzierung je nach Quelle. SVGs aus Illustrator bieten oft die größten Einsparungen. Figma-Exporte sind bereits relativ sauber. Die größten Gewinne kommen aus dem Entfernen von Editor-Metadaten, Kommentaren und dem Runden der Dezimalgenauigkeit.
Verändert die Optimierung das Aussehen meines SVG?
Nein — alle Optimierungen dieses Tools entfernen nur unsichtbare Daten (Kommentare, Metadaten, redundante Attribute) oder runden Zahlen auf eine nicht wahrnehmbare Genauigkeit. Das visuelle Ergebnis ist identisch mit dem Original.
Warum Breite- und Höhe-Attribute entfernen?
Fest kodierte Breite/Höhe-Werte verhindern, dass SVGs via CSS responsiv skaliert werden. Durch Entfernen und Behalten von nur viewBox können Sie SVG-Dimensionen vollständig über CSS-Eigenschaften steuern.
Was ist der Unterschied zwischen diesem Tool und SVGO?
SVGO ist ein Node.js-Kommandozeilenwerkzeug und der Standard für SVG-Optimierung. Dieses Tool bietet eine praktische Browser-Oberfläche für die gängigsten Optimierungen ohne Node.js-Installation.