SVG-Optimierer

Der SVG Optimizer ist ein kostenloses Online-Tool, das SVG-Dateien verkleinert, indem es Editor-Metadaten, Kommentare, Standardattribute und überflüssige Genauigkeit entfernt. 100% clientseitig, kein Upload. Er läuft vollständig in Ihrem Browser, ohne Installation oder Anmeldung.

Nein. Der Optimierer läuft vollständig in Ihrem Browser mit dem nativen DOMParser. Die Dateien verlassen niemals Ihr Gerät.

Eine grobe Heuristik von etwa 30% der Klartextgröße – typisch für gut strukturiertes SVG-Markup. Die tatsächliche CDN-Komprimierung kann geringfügig abweichen.

Diese sind die primäre Art, wie Screenreader SVG-Inhalte ankündigen. Behalten Sie sie für öffentliche oder UI-Assets bei; entfernen Sie sie nur bei rein dekorativen Bildern.

Ja, der SVG Optimizer ist zu 100% kostenlos, ohne Registrierung, ohne versteckte Gebühren und ohne Nutzungslimits. Die gesamte Verarbeitung erfolgt lokal in Ihrem Browser und gewährleistet vollständige Privatsphäre.

Absolut. Der SVG Optimizer verarbeitet alles clientseitig in Ihrem Browser. Es werden keine Daten auf einen Server hochgeladen oder dort gespeichert. Ihre Inhalte bleiben jederzeit privat auf Ihrem Gerät.

Ja, der SVG Optimizer ist vollständig responsiv und funktioniert auf Smartphones und Tablets. Sie können ihn auf jedem Gerät mit einem modernen Webbrowser nutzen, ohne App-Download.

Es ist kein Konto und keine Registrierung erforderlich. Öffnen Sie einfach den SVG Optimizer in Ihrem Browser und legen Sie sofort los. Es gibt keine Anmeldeschranken oder Nutzungsbeschränkungen.

Der SVG Optimizer unterstützt eine breite Palette beliebter Formate und Sprachen. Die vollständige Liste der unterstützten Optionen finden Sie in der Tool-Oberfläche.

Geben Sie einfach Ihre Eingabe in das vorgesehene Feld ein, passen Sie die Einstellungen nach Belieben an, und das Tool verarbeitet sie sofort. Anschließend können Sie das Ergebnis in die Zwischenablage kopieren oder herunterladen.

Ein gewöhnlicher Bildkomprimierer arbeitet mit Rasterformaten wie PNG und JPEG und wirft dabei Pixeldaten weg, um die Datei zu verkleinern. Ein SVG besteht aber überhaupt nicht aus Pixeln — es ist XML-Text, der Formen beschreibt, also gibt es im fotografischen Sinne nichts zu komprimieren. Ein SVG-Optimierer schreibt stattdessen diesen Text um: Er löscht Zeichen, die der Browser nie braucht, etwa Editor-Metadaten, Kommentare, die XML-Deklaration, überflüssige Namespaces und Koordinaten mit zwölf Nachkommastellen. Da SVG reiner Text ist, ist jedes entfernte Zeichen ein echtes Byte weniger auf der Leitung, und das Bild wird trotzdem pixelgenau identisch dargestellt, weil die Geometrie unangetastet bleibt. Das macht die Einsparung verlustfrei, anders als bei Rasterkompression, die Qualität gegen Dateigröße eintauscht. Füge dein Markup oben ein, und das Tool zeigt dir genau, wie viele Bytes jeder Bereinigungsschritt entfernt hat.

Für fast alle Web-Grafiken reichen zwei bis drei Nachkommastellen völlig aus. Design-Programme exportieren Koordinaten oft als 100.000000 oder 50.987654321, doch ein Bildschirm rendert in ganzen Pixeln, sodass Stellen ab der dritten Nachkommastelle kaum ein sichtbares Pixel verändern, dafür aber die Datei aufblähen. Dieses Tool setzt standardmäßig eine Präzision von drei und erlaubt Werte von eins bis sechs Stellen — jedes numerische Attribut und jede Pfadkoordinate wird auf dieses Limit gerundet, überflüssige Nullen am Ende werden entfernt und die führende Null bei Werten wie 0.5 wird gestrichen. Geh auf eine oder zwei Stellen herunter, wenn es um kleine Icons geht, bei denen die Einsparung am größten ausfällt; behalte vier oder mehr Stellen nur bei sehr großen Illustrationen oder präzisen technischen Zeichnungen, bei denen Rundung eine Kurve sichtbar verschieben könnte. Nutze die Vorschau nebeneinander, um zu prüfen, ob die Form nach dem Absenken der Präzision noch stimmt.

Ja, solange der Optimierer klug erkennt, welche IDs tatsächlich referenziert werden — und genau das tut dieser hier. Bevor irgendetwas entfernt wird, durchsucht er das gesamte Dokument nach IDs, auf die per url(#id), href="#id" und xlink:href="#id" verwiesen wird, denn so verknüpfen sich Verläufe, Filter, Clip-Paths und <use>-Elemente intern miteinander. Nur IDs, auf die nichts verweist, werden entfernt, sodass alle IDs erhalten bleiben, auf die dein CSS, Animationen oder wiederverwendbare Symbole angewiesen sind. Das Risiko liegt bei externen Referenzen: Wenn dein JavaScript oder ein Stylesheet in einer anderen Datei ein SVG-Element per id anspricht, kann das Tool das nicht erkennen und entfernt die ID möglicherweise trotzdem. Bei eigenständigen Icons ist das selten ein Problem, aber wenn du deine SVGs scriptest, prüfe das Ergebnis oder lass den Schalter „Ungenutzte IDs entfernen“ ausgeschaltet. Probiere es oben aus und schau dir den Diff-Tab an.

Jedes SVG-Präsentationsattribut hat einen eingebauten Standardwert, der in der Spezifikation festgelegt ist, und der Browser wendet diesen Standard immer an, wenn das Attribut fehlt. Das heißt, fill-opacity="1", stroke-width="1", stroke-linecap="butt" und opacity="1" beschreiben alle genau den Wert, den das Element ohnehin hätte, wenn du gar nichts geschrieben hättest. Sie mitzuschreiben ist harmlos, aber reiner toter Ballast — das gerenderte Ergebnis ist mit oder ohne diese Attribute byte-für-byte identisch. Editoren fügen diese expliziten Attribute hinzu, weil sie den vollständigen berechneten Zustand eines Elements serialisieren, nicht das Minimum, das zum Zeichnen nötig ist. Dieser Optimierer kennt die Standardwerte der Spezifikation und entfernt jedes Attribut, dessen Wert seinem Standard entspricht — das summiert sich in einem Icon-Set schnell, wo dieselben überflüssigen Attribute bei jeder Form wiederkehren. Eine Warnung: Entferne Standardwerte nur, wenn nichts davon per CSS überschrieben wird, denn ein entferntes Attribut kann einem geerbten Stil die Kontrolle überlassen. Füge deine Datei ein, um die Bereinigung in Aktion zu sehen.

SVGO ist der populäre Node-basierte Kommandozeilen-Optimierer, der als Teil eines Build-Schritts läuft und über Plugins und Konfigurationsdateien eingerichtet wird. Dieses Tool deckt dieselben wichtigen Bereinigungen ab — Entfernen von Editor-Metadaten, Kommentaren, Standardattributen, ungenutzten Namespaces und IDs sowie das Runden der Präzision —, läuft aber komplett im Browser, ganz ohne Installation, Konfiguration oder Terminal. Das macht es ideal für einmalige Aufräumaktionen: ein Logo, das gerade ein Kunde geschickt hat, ein Icon aus Figma, oder Markup, das du vor dem Commit noch prüfen willst. Du bekommst vierzehn einzelne Schalter, eine Live-Vorschau vorher/nachher auf Schachbrettmuster und einen Byte-für-Byte-Diff, sodass du genau siehst, was sich geändert hat, statt einer stillen Build-Ausgabe zu vertrauen. Für eine wiederkehrende Asset-Pipeline hat SVGO-Automatisierung weiterhin die Nase vorn; für schnelle interaktive Optimierung füge dein SVG oben ein und lade das Ergebnis herunter.