SVG-Optimierer
Bereinige und verkleinere SVG-Dateien, indem du Editor-Metadaten, Kommentare und überflüssige Leerzeichen entfernst, lokal in deinem Browser.
SVG-Optimierer wird geladen… Wenn nichts passiert, aktiviere JavaScript.
SVG, kurz für Scalable Vector Graphics (skalierbare Vektorgrafiken), ist ein XML-basiertes Format für zweidimensionale Grafiken, das Formen als mathematische Pfade statt als Raster aus Pixeln beschreibt. Da es Text ist, skaliert ein SVG auf jede Größe, ohne unscharf zu werden, lässt sich gut mit gzip komprimieren, kann mit CSS gestaltet, animiert und in einem einfachen Texteditor bearbeitet werden. Der Haken ist, dass die von Design-Werkzeugen exportierten SVG-Dateien selten schlank sind. Editoren wie Inkscape, Illustrator und Sketch füllen ihre Ausgabe mit privaten Namensräumen, Bearbeitungsverlauf, Generator-Kommentaren, Dokument-Metadaten und großzügiger Einrückung, all das ignoriert der Browser beim Rendern des Bildes, muss es aber trotzdem herunterladen und parsen.
Häufig gestellte Fragen
Wird mein SVG an einen Server gesendet?
Was genau entfernt der Optimierer?
Verändert das Optimieren das Aussehen meines Bildes?
Sollte ich das title-Element behalten?
Warum sind Inkscape- und Illustrator-Dateien viel größer als nötig?
Wie viel kleiner wird meine Datei?
Minifiziert oder überschreibt dies auch die Pfaddaten?
Kann ich SVG-Code einfügen, statt eine Datei hochzuladen?
Über SVG-Optimierer
Dieser Optimierer entfernt diesen Ballast. Er parst dein SVG mit dem browsereigenen DOMParser, der die XML-Struktur richtig versteht, statt sie mit fragilen regulären Ausdrücken zu zerstückeln, durchläuft dann den Baum und entfernt Kommentarknoten, metadata- und desc-Elemente, optionale title-Elemente sowie editorspezifische Elemente und Attribute wie die Namensräume inkscape und sodipodi. Er löscht die XML-Deklaration und jeden doctype und fasst auf Wunsch die überflüssigen Leerzeichen zwischen den Tags zusammen. Der bereinigte Baum wird mit XMLSerializer wieder zu gültigem SVG serialisiert, sodass das Ergebnis weiterhin ein wohlgeformtes Dokument ist, das du direkt in eine Webseite oder ein Symbolsystem einfügen kannst.
Du kannst die Auszeichnung direkt in den Editor einfügen oder eine .svg-Datei hochladen, und das Werkzeug zeigt die ursprüngliche Größe in Bytes, die optimierte Größe in Bytes und den gesparten Prozentsatz in Echtzeit an, während du die Optionen umschaltest. Die Ausgabe erscheint in einem zweiten Bereich, bereit zum Kopieren in deine Zwischenablage oder zum Herunterladen als neue Datei. Bei typischen Editor-Exporten sind die Einsparungen erheblich, oft zwischen dreißig und siebzig Prozent, ohne sichtbare Veränderung des gerenderten Bildes, weil nur nicht gerenderte Daten entfernt werden.
Alles läuft vollständig in deinem Browser. Das SVG verlässt niemals dein Gerät, es gibt keinen Upload, keinen Server und kein Konto, sodass das Werkzeug sicher für proprietäre Symbole, Markenressourcen und vertrauliche Diagramme ist. Es funktioniert auch weiterhin offline, sobald die Seite geladen ist. Der Optimierer ist bewusst konservativ: Er entfernt Daten, die das Rendern nicht beeinflussen, statt die Pfadgeometrie umzuschreiben oder Koordinaten zu runden, was bedeutet, dass die visuelle Ausgabe exakt erhalten bleibt, während die Datei spürbar kleiner wird.
Wie SVG den Krieg der Vektorformate gewann
SVG war nicht der einzige Anwärter für Vektorgrafiken im Web. Ende der 1990er Jahre unterstützten Microsoft und andere VML, die Vector Markup Language (Vektor-Auszeichnungssprache), während Adobe und Sun PGML vorantrieben, die Precision Graphics Markup Language (Auszeichnungssprache für Präzisionsgrafiken). Das World Wide Web Consortium nahm beide Vorschläge, berief eine Arbeitsgruppe ein und verschmolz die besten Ideen zu einem einzigen offenen Standard. SVG 1.0 wurde im September 2001 zu einer W3C-Empfehlung, doch die Verbreitung verlief langsam, weil der Internet Explorer, damals der vorherrschende Browser, nur VML unterstützte und für SVG ein Plug-in benötigte.
Der Wendepunkt kam mit den anderen Browsern. Firefox, Safari und später Chrome lieferten im Laufe der 2000er Jahre natives SVG-Rendering aus, und als der Internet Explorer 9 im Jahr 2011 endlich native Unterstützung hinzufügte, hatte das Format universelle Reichweite. Der Aufstieg hochauflösender Retina-Displays etwa zur selben Zeit machte SVG plötzlich unverzichtbar: Ein einziges Vektorsymbol bleibt bei jeder Pixeldichte messerscharf, während Bitmap-Symbole mehrere Exporte benötigen und auf Bildschirmen, für die sie nicht gemacht wurden, trotzdem verschwimmen. Symbolschriften hatten einen kurzen Moment, aber SVG-Symbole erwiesen sich als zugänglicher und flexibler und verdrängten sie weitgehend.
Da SVG nur XML-Text ist, erbte es sowohl die Stärken als auch den Ballast des XML-Werkzeugkastens. Design-Anwendungen behandeln die Datei wie ein Projektdokument und stopfen sie mit ihren eigenen privaten Daten voll, weshalb ein Symbol, das mit ein paar hundert Bytes wesentlicher Pfaddaten rendert, als mehrere Kilobyte Editor-Metadaten ausgeliefert werden kann. Das Optimieren von SVGs ist daher zu einem standardmäßigen Build-Schritt in modernen Front-End-Arbeitsabläufen geworden, und es sicher zu tun, indem man den echten Dokumentbaum parst, statt mit Textersetzung zu raten, ist das, was einen zuverlässigen Bereiniger von einem unterscheidet, der gelegentlich deine Grafik beschädigt.