SVG-Optimierer

Dies variiert stark je nach Quelle. SVG-Dateien aus Adobe Illustrator enthalten typischerweise große Mengen an Illustrator-spezifischen Metadaten, Layer-Daten, Font-Referenzen und XML-Namespaces, die entfernt werden. Inkscape-Exporte enthalten ihre eigenen Editor-Namespaces und Kommentare. Figma-SVGs sind in der Regel sauberer. Typische Einsparungen: 20-40% für bereits saubere SVGs, 40-70% für Illustrator- oder Inkscape-Exporte mit schweren Metadaten. Das Tool zeigt die exakten Byte-Anzahlen vor und nach der Optimierung an, sodass Sie das Ergebnis immer im Blick haben.

Design-Tools betten proprietäre Daten in SVG-Dateien ein, um ihre eigenen Bearbeitungsfunktionen zu erhalten: Inkscape speichert Layer-Namen und Guide-Positionen in sodipodi: und inkscape: Namespaces, Illustrator bettet Daten in i: und dc: Namespaces ein, und ältere Tools enthalten Sketch- oder Adobe-Metadaten. Keine dieser Daten werden benötigt, um die SVG in einem Browser darzustellen. Das Entfernen von Editor-Daten erzeugt oft den größten Einzelposten bei der Größenreduzierung, insbesondere bei komplexen Illustrator-Dateien.

Die Dezimalpräzision steuert, wie viele Nachkommastellen in Koordinatewerten beibehalten werden (z. B. d="M 10.3456789 20.1234567"). Eine Reduzierung von 6 auf 2 macht daraus d="M 10.35 20.12" und spart Bytes auf Kosten einer leichten Koordinatenrundung. Für Icons und einfache Illustrationen ist eine Präzision von 2-3 unsichtbar. Bei detaillierten technischen Zeichnungen oder Illustrationen mit feinen Kurven bleiben Sie bei 4-5. Überprüfen Sie die Vorschau bei 100% Zoom, nachdem Sie die Präzision reduziert haben, um etwaige Rundungsartefakte zu erkennen.

SVG-Elemente haben oft sperrige IDs, die von Design-Tools generiert werden: id="rect_123456789" oder id="Layer_1_xA0_Background". Das Bereinigen der IDs ersetzt diese durch kürzere Namen wie id="a" oder id="b", was Bytes bei großen SVG-Dateien mit vielen referenzierten Elementen spart. Dies ist sicher für eigenständige SVG-Dateien. Wenn Ihre SVG-IDs von externen CSS-Selektoren oder JavaScript auf Ihrer Webseite (z. B. document.getElementById("myIcon")) referenziert werden, deaktivieren Sie diese Option oder aktualisieren Sie Ihre Referenzen nach der Optimierung.

Ja. Klicken Sie auf "Or paste SVG code", um zum Code-Eingabefeld zu wechseln, und fügen Sie Ihren SVG-Markup direkt ein. Dies ist nützlich, wenn Sie eine SVG in einer HTML-Datei eingebettet haben, diese aus einem Design-Tool kopiert wurde oder von einer Chart-Bibliothek generiert wurde. Kopieren Sie nach der Optimierung das Ergebnis mit dem Copy Code Button und fügen Sie es dort wieder ein, wo Sie es benötigen.

Nein. Das Tool verwendet die integrierte DOMParser API des Browsers, um die SVG vollständig in Ihrem Browser-Tab zu parsen und zu bereinigen. Es findet kein Datei-Upload statt, kein Server verarbeitet Ihre SVG und nichts verlässt Ihren Rechner. Dies macht es sicher, proprietäre oder sensible SVG-Assets wie Produktdiagramme oder Marken-Assets zu optimieren.

Optimieren Sie vor dem Commit. Kleinere SVG-Dateien bedeuten schnellere Git-Operationen, eine kleinere Repository-Größe und sauberere Diffs (da Editor-Metadaten oft bei jedem Speichern in Illustrator geändert werden). Ein guter Workflow: Exportieren Sie die SVG aus Ihrem Design-Tool, lassen Sie sie durch diesen Optimizer laufen, prüfen Sie die Vorschau und committen Sie dann die optimierte Version. Behalten Sie die Originalquelle in einem separaten Ordner für Design-Assets, falls Sie diese später erneut bearbeiten müssen.