Ein schneller, privater SVG-Optimierer
Scalable Vector Graphics (SVGs) sind der Standard für gestochen scharfe, auflösungsunabhängige Icons und Illustrationen im Web. Wenn du jedoch eine SVG aus einem Design-Tool exportierst, ist die resultierende Datei selten für den produktiven Einsatz optimiert. Mit diesem SVG-Optimierer kannst du deine Vektorgrafiken sofort bereinigen, unnötigen Code entfernen und die Dateigröße ohne Qualitätsverlust reduzieren.
Da dieses Tool vollständig in deinem Browser läuft, werden deine Grafiken niemals auf einen Server hochgeladen. Du kannst bedenkenlos SVG-Dateien komprimieren, die geschützte Logos, unveröffentlichte Produktdesigns oder vertrauliche Diagramme enthalten. Die Verarbeitung erfolgt in Echtzeit und bietet dir sofortiges Feedback zur eingesparten Dateigröße sowie einen visuellen Vorher-Nachher-Vergleich, um sicherzustellen, dass deine Grafiken perfekt intakt bleiben.
Warum Sie SVG-Dateien komprimieren sollten
Im Gegensatz zu Rastergrafiken (wie JPEGs oder PNGs), die Pixeldaten speichern, sind SVGs im Grunde XML-Textdateien mit mathematischen Anweisungen zum Zeichnen von Formen. Wenn Vektorgrafik-Programme diese Dateien erstellen, enthalten sie oft viele überflüssige Daten, die Browser zum Rendern des Bildes gar nicht benötigen.
Häufige Gründe für zu große SVG-Dateien sind:
- Editor-Metadaten: Tags und Attribute der jeweiligen Software, die nur für die Bearbeitung relevant sind.
- Kommentare und leere Elemente: Entwickler-Notizen, leere Gruppen (
<g>) und ausgeblendete Ebenen, die für die visuelle Darstellung irrelevant sind. - Zu hohe Präzision: Pfadkoordinaten mit sechs oder mehr Nachkommastellen (z. B.
14.123456), die unnötig Speicherplatz verbrauchen. - Standard-Attribute: Stile und Attribute, die dem Standardverhalten des Browsers entsprechen und nicht explizit deklariert werden müssen.
Mit einem SVG-Minifier entfernen Sie diesen versteckten Text. Wenn Sie Ihre SVG-Dateien verkleinern, laden Ihre Webseiten schneller, verbrauchen weniger Bandbreite und verbessern die allgemeine Performance sowie Ihre SEO-Rankings.
SVG online komprimieren
Dieses Tool bietet verschiedene anpassbare Optionen, um Ihnen eine präzise Kontrolle über den Optimierungsprozess zu geben. Je nachdem, wie Sie die fertige Grafik verwenden möchten, können Sie diese Einstellungen anpassen, um die perfekte Balance zwischen Dateigröße und Code-Lesbarkeit zu finden.
Nachkommastellen
Vektorpfade werden anhand von Koordinaten gezeichnet. Design-Software exportiert diese Koordinaten oft mit extremer Genauigkeit, was zu langen Zahlenreihen führt. Durch das Verringern der Nachkommastellen (Float Precision) können Sie die Zeichenanzahl Ihrer Datei drastisch reduzieren. Ein Wert von 1 oder 2 ist für Web-Icons meist perfekt. Falls Kurven in der visuellen Vorschau kantig wirken oder sich Formen verschieben, erhöhen Sie einfach den Schieberegler für die Genauigkeit, bis das Bild wieder korrekt aussieht.
Multipass-Optimierung
Die Optimierung ist oft ein mehrstufiger Prozess. Das Entfernen eines unnötigen Elements kann ein übergeordnetes Element leeren, welches dann ebenfalls entfernt werden kann. Die Aktivierung der Einstellung "Multipass" weist den Optimizer an, seine Bereinigungsroutinen so oft zu wiederholen, bis die Dateigröße nicht weiter reduziert werden kann. Das garantiert die kleinstmögliche Datei.
Abmessungen entfernen
Standardmäßig werden viele SVGs mit festen width- und height-Attributen exportiert (z. B. width="500px"). Das fixiert das Bild zwar auf eine bestimmte Größe, erschwert aber responsives Webdesign. Ein Häkchen bei "Abmessungen entfernen" löscht diese Attribute, behält aber die viewBox bei. Dadurch kann das SVG basierend auf dem CSS des übergeordneten Containers fließend skalieren, was die Verwendung in modernen Web-Layouts viel einfacher macht.
Pretty Print
Wenn Sie die absolut kleinste Dateigröße erreichen wollen, lassen Sie dies deaktiviert. Das Tool gibt dann eine einzige, kompakte Codezeile aus. Wenn Sie jedoch ein SVG bereinigen, das Sie später manuell bearbeiten, animieren oder direkt in ein HTML-Dokument einbetten möchten, sorgt "Pretty Print" für eine formatierte Ausgabe mit sauberen Einrückungen und Zeilenumbrüchen.
Best Practices für Vektorgrafiken
Die Optimierung von SVGs ist nur ein Schritt beim Aufbau einer schnellen, barrierefreien Website. Bei der Arbeit mit Vektorgrafiken solltest du berücksichtigen, wie diese eingebunden werden. Wenn du das SVG direkt inline in dein HTML einbettest, ist das Minifizieren des SVGs entscheidend, um die HTML-Dateigröße gering zu halten. Für maximale Performance empfiehlt es sich, die gesamte Seite zusätzlich mit einem HTML Minifier oder CSS Minifier zu komprimieren.
Prüfe nach der Optimierung immer die visuelle Vorschau. Während sich die meisten SVGs problemlos komprimieren lassen, erfordern hochkomplexe Illustrationen mit aufwendigen Verläufen oder präzisen Clipping-Pfaden möglicherweise eine höhere Float-Präzision, um ihr ursprüngliches Aussehen beizubehalten. Der integrierte Vorher-Nachher-Vergleich macht es leicht, ungewollte Änderungen zu erkennen, bevor du die minifizierte Datei herunterlädst.
Zu guter Letzt: SVGs eignen sich zwar perfekt für Logos, Icons und flache Illustrationen, sind aber nicht für komplexe Fotos gedacht. Besteht ein SVG hauptsächlich aus eingebetteten Rastergrafiken (wie Base64-kodierten JPEGs), hat eine Optimierung kaum einen Effekt. In diesen Fällen ist es oft sinnvoller, die Grafik mit einem SVG in PNG Konverter vollständig umzuwandeln.