SVG-Optimierer

SVG einfügen oder ablegen und mit SVGO verkleinern. Alles bleibt in Ihrem Browser.

So funktioniert SVG-Optimierer

SVG Optimizer führt SVGO (SVG Optimizer) in einem Web Worker innerhalb Ihres Browsers aus, um Ihre SVG-Dateien zu minifizieren und zu bereinigen, ohne sie hochzuladen. SVGO wendet einen konfigurierbaren Satz von Plugins an, die Kommentare entfernen, Leerzeichen reduzieren, identische Pfade zusammenführen, Formen in ihre kompakteste Darstellung konvertieren und Attribute entfernen, die keinen visuellen Effekt haben. Das Ergebnis ist eine kleinere SVG-Datei, die identisch mit dem Original dargestellt wird.

SVG-Dateien, die von Design-Tools wie Figma, Illustrator oder Inkscape produziert werden, enthalten oft erheblichen Overhead: Editor-spezifische Metadaten, leere Gruppen, redundante Transform-Attribute und Namespace-Deklarationen, die kein Browser benötigt. SVGOs Standard-Plugin-Satz entfernt diesen Overhead zuverlässig. Die optimierte Datei wird als Download angeboten, und die prozentuale Größenreduzierung wird angezeigt, damit Sie bestätigen können, dass die Optimierung lohnenswert war.

Verfasst von Bastien Sulyan

So wird SVG-Optimierer verwendet, Schritt für Schritt

Ziehen Sie Ihre SVG-Datei auf den Upload-Bereich oder klicken Sie, um zu suchen.
Der SVGO-Web-Worker führt die Optimierung sofort mit dem Standard-Plugin-Satz durch.
Sehen Sie sich die prozentuale Reduzierung und die ursprünglichen versus optimierten Dateigrößen an.
Klicken Sie auf Herunterladen, um die optimierte SVG auf Ihrem Gerät zu speichern.
Wenn bestimmte Plugins Rendering-Probleme verursachen, passe die Plugin-Konfiguration an und optimiere erneut.

Häufige Anwendungsfälle

Ein Frontend-Entwickler optimiert aus Figma exportierte Icons, bevor er sie in eine Produktions-Asset-Pipeline übergibt, und reduziert jedes Icon von 4 KB auf unter 1 KB.
Eine Webdesignerin bereinigt SVG-Illustrationen, die aus Illustrator exportiert wurden und Ebenen von Editor-Metadaten enthalten, die im Browser unsichtbar sind, aber die Datei aufblähen.
Ein Entwickler, der eine Icon-Font aus SVG-Glyphen erstellt, stellt sicher, dass jede Quell-SVG vor dem Font-Build-Schritt sauber und einheitlich strukturiert ist.
Ein Performance-Ingenieur prüft Inline-SVG in HTML und ersetzt jedes aufgeblähte Original durch eine SVGO-optimierte Version, um das Seitengewicht zu verbessern.

Häufig gestellte Fragen

Verändert SVGO das Aussehen meiner SVG?

SVGOs Standard-Plugins sind so gewählt, dass sie visuell verlustfrei sind: Die optimierte SVG wird in allen Standard-Browsern identisch mit dem Original dargestellt. Einige aggressive Plugins (z. B. solche, die Pfadkoordinaten stark runden) können subtile Renderingunterschiede verursachen. Wenn Sie eine visuelle Veränderung feststellen, vergleichen Sie die Original- und optimierten Dateien in einem Browser und deaktivieren Sie das jeweilige Plugin.

Wird die SVG-Datei zur Optimierung an einen Server gesendet?

Nein. SVGO läuft in einem Web Worker innerhalb Ihres Browser-Tabs. Der SVG-Text wird von Ihrer lokalen Festplatte gelesen, im JavaScript-Arbeitsspeicher verarbeitet, und die Ausgabe wird zur Seite für den Download zurückgegeben. Der Dateiinhalt verlässt Ihr Gerät nicht.

Wie viel kleiner wird meine SVG?

Die Reduzierung hängt von der Quelle ab. SVGs, die von Design-Tools mit Editor-Metadaten exportiert wurden, schrumpfen häufig um 30 bis 70 Prozent. Handgeschriebene SVGs, die bereits schlank sind, können nur 5 bis 15 Prozent Reduzierung zeigen. Das Tool zeigt die genauen Byte-Anzahlen und den Prozentsatz, sodass Sie jede Datei einzeln beurteilen können.

Beeinflusst die Optimierung SVG-Animationen oder JavaScript innerhalb der Datei?

Die Konfiguration bewahrt Animationselemente und SMIL-Attribute. Script-Elemente werden entfernt: Das Tool fügt das Plugin removeScripts zusätzlich zum SVGO-Standard-Preset hinzu, da ein SVG, das Sie einbetten möchten, keinen ausführbaren Code enthalten sollte. Einige Plugins, die Attribute bereinigen, könnten mit Animationen interagieren, wenn die Animation diese Attribute per ID referenziert; überprüfen Sie die gerenderte Ausgabe nach der Optimierung von Dateien mit komplexen Animationen.

Kann ich mehrere SVG-Dateien auf einmal optimieren?

Die aktuelle Version verarbeitet jeweils eine SVG-Datei. Ziehen Sie eine Datei, laden Sie das Ergebnis herunter, dann die nächste. Stapelverarbeitung für mehrere Dateien in einer Sitzung ist in dieser Version nicht verfügbar.

Welche SVGO-Version verwendet das Tool?

Das Tool bündelt SVGO in einem Web Worker. Die gebündelte Version ist in den Tool-Informationen angegeben. SVGO wird aktiv gepflegt und die Plugin-API hat sich zwischen v1, v2 und v3 erheblich verändert; das aktuelle Tool verwendet das v3-Plugin-Format.