SVG-Optimierer

So funktioniert es

1. SVG einfügen oder hochladen: Geben Sie SVG-Markup direkt ein oder laden Sie eine .svg-Datei hoch, exportiert aus Illustrator, Figma oder Sketch.
2. Optimierungs-Pässe konfigurieren: Wählen Sie die anzuwendenden Optimierungen, Kommentare entfernen, Metadaten entfernen, Pfade vereinfachen und ViewBox normalisieren.
3. Optimieren: Das Tool führt die ausgewählten Pässe durch und zeigt den Prozentsatz der Dateigrößenreduzierung an.
4. Herunterladen oder kopieren: Speichern Sie das optimierte SVG oder kopieren Sie das Markup zum Einfügen in Ihren Code.

Warum SVGs optimieren?

Aus Designtools exportierte SVG-Dateien sind voll mit unnötigen Daten, Editor-Metadaten, Inline-Stildeklarationen mit Standardwerten, leeren Gruppen, redundanten Transform-Attributen und Kommentaren. Dieser Ballast erhöht die Dateigröße, ohne die visuelle Ausgabe zu beeinflussen. SVGO (der branchenüblich genutzte SVG-Optimierer) kann SVG-Dateigrößen typischerweise um 50-80 % reduzieren bei pixelgenauer Wiedergabe. Kleinere SVGs laden schneller, lassen sich rascher in HTML einbetten und sparen Bandbreite, besonders wichtig bei Icon-Systemen mit Dutzenden SVG-Dateien pro Seite.

Angewendete Optimierungen

• Kommentare entfernt: Editor- und Generator-Kommentare entfernt
• Metadaten entfernt: title, desc und XMP-Metadaten-Elemente
• Leere Gruppen kollabiert: unnötige <g>-Wrapper-Elemente entfernt
• Pfade vereinfacht: redundante Pfadbefehle zusammengeführt und gekürzt
• Attribute aufgeräumt: Standardwerte und Präsentationsattribute entfernt
• ViewBox normalisiert: konsistentes Koordinatensystem

Eine kurze Geschichte von SVG und SVGO

Scalable Vector Graphics begann als Wettbewerb zwischen zwei W3C-Vorschlägen: Precision Graphics Markup Language (PGML) von Adobe, IBM, Netscape und Sun, und Vector Markup Language (VML) von Microsoft. Beide wurden 1998 eingereicht; der W3C-Kompromiss wurde SVG, das als SVG 1.0 im September 2001 empfohlen wurde. Internet Explorer weigerte sich bekanntlich bis IE9 (2011) SVG-Unterstützung auszuliefern, während Firefox, Safari und Opera es ab Mitte der 2000er Jahre unterstützten. SVG 1.1 erschien 2003, mit einer Zweiten Ausgabe 2011. SVG Tiny 1.2 zielte 2008 auf mobile Geräte. SVG 2 begann etwa 2016 entworfen zu werden, stagnierte aber; heute bleibt es ein Candidate Recommendation Draft (letzte Berührung 2018), mit Browsern, die Stücke einzeln ausliefern. Die Optimierung kam später. SVGO wurde von Kir Belevich (svg-go) erstellt und erstmals Oktober 2012 auf GitHub veröffentlicht, in JavaScript geschrieben. Es wurde der De-facto-Standard, integriert in webpack-loader, Vite, Sketch, Figma-Export-Plugins und die SVGOMG-Web-UI von Jake Archibald (Chrome-Team), gestartet 2015. SVGO 3 (veröffentlicht 2023) modernisierte die Codebasis. Dieses Werkzeug implementiert eine sichere Teilmenge der wirkungsvollsten SVGO-Plugins und läuft vollständig in Ihrem Browser.

Was ein SVG-Optimierer tatsächlich tut

• Reduktion der Dezimalpräzision. Illustrator exportiert Pfade mit 6 Dezimalstellen wie M127.348293. Drei Dezimalstellen sind für typische Icon-Größen visuell identisch; eine oder zwei reichen oft. SVGO verwendet standardmäßig 3 Dezimalstellen über das cleanupNumericValues-Plugin. Geringere Präzision = kleinere Datei.
• Nutzlose Gruppen zusammenfassen. Design-Tools wickeln jede Operation in <g>-Elemente ein; viele werden nach Vereinfachung leer. Das collapseGroups-Plugin verschmilzt Einzelkind-Gruppen mit ihrem Elternteil.
• Metadaten entfernen. Illustrator stempelt jeden Export mit <metadata>...</metadata>-Blöcken, die XMP-Pakete enthalten, Inkscape mit sodipodi-Namespace-Attributen, Figma mit Editor-IDs. Nichts davon beeinflusst das Rendering. removeMetadata, removeEditorsNSData und removeXMLProcInst erledigen das.
• Optimierung von Pfadbefehlen. Absolute Koordinaten in relative umwandeln (oft kürzer), aufeinanderfolgende Liniensegmente zusammenführen (l 5,0 l 0,5 bleibt bei zwei; L 5,0 L 5,5 wird v 5), nutzlose Z nach z entfernen. Das convertPathData-Plugin kann 30-50 % bei Pfadzeichenfolgen sparen.
• Entfernung von Standardattributen. fill="black", stroke="none", stroke-width="1" sind Standardwerte; SVGO entfernt sie. Kombiniert mit mergeStyles halbiert dies oft inline-gestylte Exporte.
• Farbverkürzung. #ffffff → #fff; rgb(255,255,255) → #fff; benannte Farben (aliceblue) → hex falls kürzer. Das convertColors-Plugin.
• Entfernung unbenutzter IDs. Vom Editor generierte IDs wie id="path-7423" werden in der Regel nie referenziert. SVGOs cleanupIds entfernt verwaiste IDs und minifiziert den Rest zu a, b, c...

Wo SVG-Optimierung wichtig ist

• Icon-Systeme. Eine Seite mit 30 SVG-Icons à 2 KB sind 60 KB; auf 800 Byte je optimiert spart 36 KB. Heroicons, Lucide, Phosphor, Feather liefern alle voroptimierte SVGs aus; wenn Sie sie aus einer Designdatei extrahiert haben, müssen Sie dies selbst tun.
• Logos und Markenassets. An Kunden ausgelieferte Logos sind oft 50-100 KB aus Illustrator; optimiert sind sie 5-10 KB. Gleiche visuelle Treue, geringere Bandbreite, schnelleres Laden der Seite. Das Wikipedia-Logo-SVG fiel nach einer einzigen Optimierungsphase von 39 KB auf 11 KB.
• Inline-SVG in HTML. Wenn Sie SVG inline einbetten (keine zusätzliche HTTP-Anfrage), bläht jedes Byte des SVG die HTML-Nutzlast auf, die den Browser-Parser blockiert. Ein 200-Byte-Icon vs. 2 KB ist wichtig für das First-Paint-Timing.
• Datenvisualisierung. D3.js, Observable, ECharts-SVG-Ausgabe und React-vis produzieren große SVGs mit Tausenden von Elementen. Ein Streudiagramm mit 5.000 Punkten ist leicht 500 KB roh; optimiert kann es auf 150 KB fallen und identisch bleiben.
• Icon-Font-Generierung. Tools wie IcoMoon, Fontello und Fontastic konvertieren SVGs zu Icon-Fonts. Voroptimierung der Quell-SVGs sorgt für sauberere Font-Ausgabe und kleinere Font-Dateien.
• Druck- und PDF-Assets. SVG in PDF einbetten (über Web-zu-PDF-Tools wie Puppeteer, wkhtmltopdf) bedeutet, dass der SVG-Bloat im endgültigen PDF landet. Vorher optimieren.
• E-Mail-sicheres SVG. Viele E-Mail-Clients (Outlook, einige Gmail-Apps) rendern SVG überhaupt nicht; für diejenigen, die es tun (Apple Mail, Gmail Web), hält kleineres Inline-SVG E-Mails unter der Gmail-Beschnitt-Schwelle von 102 KB.

Optimierungsfehler, die SVGs zerstören

• Entfernen referenzierter IDs. SVGs verwenden oft <defs> mit IDs, die über url(#gradient-1) in fill oder stroke referenziert werden. Aggressive ID-Entfernung bricht Verläufe, Masken, Clip-Pfade, Filter. Verwenden Sie ein Werkzeug, das Referenzen verfolgt, nicht blinde Regex.
• Blindes Entfernen der width/height-Attribute. Verliert das natürliche Seitenverhältnis. Das Ergebnis: <img src="icon.svg"> dehnt sich aus, um seinen Container zu füllen, ohne intrinsische Größe, was CLS (Cumulative Layout Shift) verursacht. Behalten Sie mindestens viewBox; vorzugsweise auch width/height.
• Zu aggressive Dezimalreduktion. Auf 0 Dezimalstellen reduzieren bei kleinen Icons macht Pfade sichtbar zackig. 3 Dezimalstellen sind ein sicherer Standard; gehen Sie nur bei Icons größer als 64×64 oder wo Pixel-Perfektion nicht erforderlich ist auf 1.
• Entfernen von xmlns beim Inlinen. Eigenständige SVG-Dateien benötigen xmlns="http://www.w3.org/2000/svg". Inline-SVG in HTML nicht (der HTML5-Parser behandelt es), aber wenn Sie das SVG möglicherweise später in eine Datei extrahieren, behalten Sie das xmlns. Verwirrung hier bricht Safaris SVG-Rendering.
• Ersetzen von currentColor durch hartcodiertes Fill. fill="currentColor" ist ein mächtiger CSS-Hook: Das Icon erbt die Textfarbe. Aggressive Optimierer ersetzen ihn durch den berechneten Wert und brechen Darkmode und themenbasierte Icon-Systeme.
• Pfade zusammenführen, die getrennt bleiben sollten. Einige Animationen zielen auf spezifische Pfad-IDs; einige Barrierefreiheitstools verlassen sich auf mehrere <path>-Elemente mit individuellem <title>-Text. Das mergePaths-Plugin zerstört diese. Deaktivieren Sie es für animierte oder barrierefreie SVGs.
• Entfernen barrierefreier <title> und <desc>. SVGs, die als eigenständige Bilder oder in <img>-Tags verwendet werden, benötigen <title> für Bildschirmleser (ähnlich Alt-Text). Aggressive Metadatenentfernung streift dies. Entweder Titel behalten oder aria-label am eingebetteten SVG-Element hinzufügen.

Weitere häufig gestellte Fragen

Wie viel kann SVG-Optimierung tatsächlich sparen?

Es hängt stark von der Quelle ab. Adobe-Illustrator-Exporte schrumpfen oft beim ersten Durchgang um 60-80 %, hauptsächlich durch Metadaten, Editor-Namespaces und Dezimalpräzisionsreduktion. Figma-Exporte sind out-of-the-box sauberer (typischerweise 20-40 % Einsparung). Von einem Entwickler von Hand geschriebenes SVG? Oft 5-15 %, da nicht viel zu entfernen ist. Das Wikipedia-Logo, ein Extremfall von Illustrator-Bloat, ging von 39 KB auf 11 KB. Ein typisches 24×24-Icon von Figma fällt von 1,4 KB auf 0,6 KB.

Wann sollte ich SVG inline einbetten vs. als externe Datei verwenden?

Inline (<svg>...</svg> in HTML) für kleine Icons (unter 2 KB), kritischen Above-the-Fold-Inhalt und überall, wo Sie CSS zum Stylen des SVG benötigen (z. B. currentColor, Hover-Zustände, Darkmode). Externe Datei (<img src="icon.svg"> oder CSS background-image) für wiederholt verwendete identische Icons (der Browser cached), größere Illustrationen, Inhalt, der keine CSS-Themenanpassung benötigt. SVG-Sprite (einzelne Datei mit mehreren <symbol>-Elementen, referenziert durch <use>) war das Icon-System-Muster von 2014-2019, jetzt weitgehend durch Inline-SVG-Komponenten in React/Vue/Svelte abgelöst.

Gibt es Sicherheitsrisiken in unoptimierten SVGs?

Ja. SVG kann <script>-Tags und onload, onclick-Event-Handler einbetten; von Benutzern hochgeladene SVGs sind ein XSS-Vektor. SVG kann externe Ressourcen über <image href="..."> referenzieren, was die IP des Betrachters leakt. SVG-Fonts (veraltet, aber noch parseable) hatten historisch Pufferüberläufe. Ein guter Optimierer streift <script> und Event-Handler im Rahmen der Bereinigung; wenn Sie Benutzer-SVG-Uploads akzeptieren, schleusen Sie sie vor der Auslieferung durch einen gehärteten Sanitizer (DOMPurify mit SVG-Profil).

Kann ich SVG mit der Befehlszeile optimieren?

Ja. npx svgo input.svg -o output.svg verwendet die kanonische SVGO-Bibliothek. Konfigurieren Sie Plugins über svgo.config.js. CI-Integrationen: imagemin-svgo in webpack, vite-plugin-svgo, GitHub Action antfu/svg-opt. Für Batch-Optimierung: svgo -f ./icons -o ./icons-optimised. Das Browser-Werkzeug hier ist schneller für Einzelfälle und funktioniert ohne installiertes Node.

Wird mein SVG an einen Server gesendet, wenn ich hier optimiere?

Nein. Die Optimierung läuft vollständig in Ihrem Browser über JavaScript auf dem von Ihnen eingefügten SVG-Markup. Öffnen Sie den Network-Tab in DevTools während der Optimierung; Sie sehen null ausgehende Anfragen. Sicher für proprietäre Logos, unveröffentlichte Icon-Designs, interne Unternehmens-SVGs und alles, was unter NDA steht.

Verwandte Tools