So komprimieren Sie SVG-Dateien.

Öffnen Sie den SVG-Kompressor und wählen Sie eine SVG-Datei oder probieren Sie ein Beispiel aus. Das Beispiel ist svg-compressor.svg, ein 985-Byte großes Orbit-Symbol mit einem 512 × 512 viewBox, Farbverlaufsfüllung, Titel und Beschreibung. Verwenden Sie „Markup einfügen“ SVG, wenn das Markup bereits in einem Editor oder in der Zwischenablage vorhanden ist.

Das Tool akzeptiert bis zu 20 Dateien mit jeweils 2 MB. Es analysiert ein vollständiges SVG-Dokument und entfernt Standard-SVG-Dokumentdeklarationen, ohne externe Dateien zu laden. Fehlerhaftes XML, benutzerdefinierte Entitätsdeklarationen und interne Dokument-Teilmengen werden abgelehnt. Sehr komplexe Dateien können auch das Element- oder Verarbeitungszeitlimit erreichen.

Dieser Arbeitsablauf erzeugt statische Vektorgrafiken. Skripte, Ereignishandler, externe Ressourcen, Animationen und eingebettete Rasterbilder werden entfernt. Die Original-Vorschau ist bereits bereinigt und sollte daher nicht als uneingeschränkte Wiedergabe aller Funktionen der Quelldatei interpretiert werden.

Die beiden Vorschaufenster zeigen das bereinigte Original und das optimierte Ergebnis. Die Größen neben „Original“ und „Optimiert“ sowie die Byte-Zusammenfassung vergleichen die Quelldatei mit der fertigen Ausgabe. Es wird ein Anstieg gemeldet, wenn die Optimierung eine bestimmte Datei vergrößert, anstatt jedes Mal eine Reduzierung zu versprechen.

Öffnen Sie die Einstellungen und stellen Sie die Dezimalgenauigkeit für das Beispiel auf 2. Die Genauigkeit reicht von 1 bis 5 und beginnt bei 3. Niedrigere Werte können die numerische Geometrie vereinfachen, aber feine Kurven, kleine Lücken oder ausgerichtete Kanten verschieben. Erhöhen Sie den Wert, wenn die Vorschau wichtige Details verliert.

Dieses Beispiel verwendet eine einfache Geometrie, daher behält die Genauigkeit 2 ihre erkennbare Form bei. Andere SVGs mit komplexen Dezimalkoordinaten können sich stärker verändern. Die Ansicht „Optimiertes SVG-Markup“ zeigt den tatsächlichen Text, der heruntergeladen wird; es ist keine separate Darstellung des Originals.

Lassen Sie „Zugängliche Titel und Beschreibungen beibehalten“ für das Beispiel aktiviert. Dies behält den SVG-Titel und die Beschreibung bei, während redundante Editormetadaten entfernt und geeignetes Markup vereinfacht werden. Dies sind unterschiedliche Arten von Informationen und sollten nicht als austauschbar behandelt werden.

„Interne IDs kürzen“ ist standardmäßig aktiviert. Der Optimierer aktualisiert Referenzen innerhalb der SVG, aber externe CSS oder JavaScript verlassen sich möglicherweise weiterhin auf die ursprünglichen IDs. Deaktivieren Sie diese Option, wenn die Datei Teil einer größeren Anwendung ist, die ihre Elemente benennt, und testen Sie die fertige SVG in diesem Kontext.

Lassen Sie „Responsive Abmessungen“ und „Lesbares Ausgabemarkup“ für das Beispiel deaktiviert. „Responsive Abmessungen“ entfernt feste Breiten- und Höhenangaben, wenn die Koordinaten-viewBox eine skalierbare Größe bieten kann. „Lesbares Ausgabemarkup“ fügt Einrückungen hinzu und ist für die Wartung nützlich, kann aber die Textgröße erhöhen.

Wählen Sie Start und dann Download. Die bearbeitete Ausgabe ist 635 Bytes groß im Vergleich zur 985-Byte-Quelle: eine Reduzierung um 35.5%. Titel und Beschreibung bleiben erhalten, und der angezeigte Vergleich wird aus der echten Quelle und dem heruntergeladenen SVG gerendert.

Der Artikel rendert beide Vektoren mit 1,024 Pixeln für eine scharfe Illustration des Ergebnisses; ihre logische Koordinatengröße bleibt 512 × 512. Eine größere Vorschau fügt dem gespeicherten SVG keine Rasterinhalte hinzu. Überprüfen Sie den tatsächlichen Vektor auf Ihrer Zielseite, bevor Sie ein vorhandenes Produktions-Asset ersetzen.

Eine Datei wird als SVG mit ihrem ursprünglichen Basisnamen heruntergeladen. Ein Stapel wird als eine ZIP-Datei heruntergeladen, mit nummerierten Suffixen für doppelte Dateinamen. Die Verarbeitung erfolgt im Browser. Behalten Sie die Originalquelle bei, falls Sie später andere Optimierungseinstellungen ausprobieren möchten.