SVG-Optimierer
Optimieren Sie SVG-Dateien — entfernen Sie Editor-Metadaten, runden Sie Pfade und reduzieren Sie unnötige Attribute. Läuft im Browser.
Was macht ein SVG-Optimierer?
Aus Designtools (Figma, Sketch, Illustrator, Inkscape) exportierte SVG-Dateien sind in der Regel 30–70 % größer als nötig. Editoren hinterlassen Kommentare, Signatur-Metadaten, redundantes CSS, leere Gruppen und übertriebene numerische Präzision, die kein menschliches Auge wahrnehmen kann. Ein Optimierer schreibt dieselbe Zeichnung in ein kleineres, gleichwertiges SVG um – pixelidentisch für einen Renderer, aber nur ein Bruchteil der Dateigröße. Alles passiert lokal auf deinem Gerät – dein SVG wird nie hochgeladen, nie auf einen Server kopiert, nie geloggt. Diese Datenschutzgarantie ist wichtig für Branding-Dateien, interne Produkt-Icons und jedes SVG, das nicht auf einem fremden Server liegen soll. Die Standardwerte sind auf Icon-Qualität abgestimmt: Die Präzision steht auf 2 Dezimalstellen, Kommentare und Editor-Metadaten werden entfernt, überflüssige Gruppen aufgelöst, und die ursprüngliche viewBox bleibt für responsive Skalierung erhalten. Für Illustrationen mit feinen Kurven erhöhe die Präzision auf 3; für responsive Icon-Sets entfernt die Option Maße entfernen die festen width/height-Attribute, sodass CSS die Icons auf jede gewünschte Größe skalieren kann.
So optimierst du ein SVG
Füge das SVG-Markup ein oder lege eine .svg-Datei in der Drop-Zone ab. Passe die Optionen an – die Vorgaben sind sinnvoll. Wähle die numerische Präzision (2 reicht für die meisten Icons), und drücke dann Optimieren. Die Vorher/Nachher-Vorschau bestätigt, dass sich visuell nichts geändert hat. Kopiere das optimierte Markup oder lade die Datei direkt herunter.
Tipps, die noch mehr Bytes sparen
Verwende eine einzige Farbpalette und vermeide eingebettete Rasterbilder – base64-kodierte PNGs in einem SVG laufen dem Format zuwider. Wandle Text nur dann in Pfade um, wenn du eine bestimmte Glyphe brauchst; ansonsten behalte <text>-Tags, damit Screenreader und Suchmaschinen den Inhalt sehen. Komprimiere die resultierende Datei auf deinem Server mit gzip/brotli: Optimiertes SVG lässt sich sehr gut komprimieren und erreicht oft 70 % der Größe nach der Optimierung.
Was jede Option bewirkt
| Option | Wirkung | Hinweise |
|---|---|---|
| Kommentare entfernen | Entfernt -Blöcke, die Editoren hinterlassen. | Fast immer sicher. Nur deaktivieren, wenn Kommentare die Datei dokumentieren. |
| Metadaten entfernen | Entfernt | Sicher – Metadaten sind für das Designtool, nicht für den Renderer. |
| Überflüssige Gruppen reduzieren | Entfernt | Visuell identisch, spart oft 5–15 %. |
| Width/Height entfernen (responsives SVG) | Entfernt die width/height-Attribute, sodass CSS das SVG dimensioniert. | Nützlich für Icon-Systeme; standardmäßig aus, damit die Datei eigenständig bleibt. |
| Numerische Präzision | Rundet Pfadzahlen auf N Dezimalstellen. | 2 ist Standard, 3 für feine Illustrationen, 1 nur für winzige Icons. |
Häufig gestellte Fragen
Wird die Optimierung mein SVG kaputtmachen?
Wird etwas hochgeladen?
Was ist mit SVG-Sprites oder Symbolen?
Wie klein sollten Icons sein?
Sollte ich xmlns und viewBox beibehalten?
xmlns wird das SVG außerhalb von HTML5 nicht gerendert; ohne viewBox verlierst du die responsive Skalierung. Beide Attribute sind winzig und es lohnt sich, sie zu behalten.