SVG optimieren & verkleinern
SVG-Exporte aus Figma, Illustrator oder Inkscape enthalten oft unnötigen Ballast: Kommentare, überschüssigen Whitespace und redundante Metadaten. JNRT Pixel entfernt diesen Overhead direkt im Browser — ohne Upload.
Was wird optimiert?
Kein visueller Qualitätsverlust: Die Darstellung des SVGs im Browser ist nach der Optimierung pixelgleich — es werden ausschließlich nicht-darstellungsrelevante Daten entfernt. Typische Einsparung: 20–50% der Dateigröße.
SVG-Optimierungs-Tipps
Häufige Fragen zur SVG-Optimierung
Verliere ich Animationen oder Interaktivität? +
Nein. JNRT Pixel entfernt nur Whitespace und Kommentare aus dem SVG-Text. CSS-Animationen, JavaScript-Event-Handler und alle visuellen Eigenschaften bleiben vollständig erhalten.
Funktioniert das auch für sehr große SVGs? +
Ja, der Browser kann auch große SVG-Dateien verarbeiten. Bei sehr komplexen SVGs mit tausenden von Pfaden kann die Verarbeitung einen Moment dauern.
Wird GZIP-Komprimierung berücksichtigt? +
Nein — JNRT Pixel reduziert die Zeichenzahl im SVG-Text. Wenn dein Webserver GZIP-Komprimierung aktiviert hat (was empfohlen wird), wird die tatsächlich übertragene Dateigröße noch kleiner sein.
Wissenswertes zu diesem Tool
Kurz erklärtSVG-Optimierung im Browser — entfernt Whitespace, redundante Defs, Editor-Metadaten.
SVG ist das einzige weit verbreitete Vektor-Bildformat im Web. Während alle anderen Bildformate (JPG, PNG, WebP, AVIF, GIF) Pixel-Raster speichern, definiert SVG das Bild durch mathematische Pfade, Formen und Farbangaben in XML. Daraus ergeben sich zwei einmalige Eigenschaften: beliebige Skalierbarkeit (ein SVG-Logo sieht auf einem 24-Zoll-Monitor genauso scharf aus wie auf einer Smartwatch) und meistens extrem kleine Dateigrößen (ein typisches Logo-SVG ist 2–10 KB groß, eine pixelbasierte Variante in akzeptabler Qualität würde 20–100 KB benötigen). Mit diesem Werkzeug optimierst du SVG-Dateien lokal im Browser. SVG-Optimierung ist nicht „Komprimierung" im klassischen Sinne — die Pfade werden nicht verändert. Stattdessen werden redundante Daten entfernt: überflüssige Whitespace-Zeichen, ungenutzte "<defs>"-Definitionen, Adobe-Illustrator- oder Inkscape-spezifische Metadaten, leere Group-Tags, redundante Attribute, kurzschreibbare Pfad-Befehle. Bei einem typischen Logo, das aus Illustrator exportiert wurde, sind 50–80% Größenreduktion möglich, ohne dass am Bild selbst etwas zu sehen ist. Was wird konkret entfernt? Adobe Illustrator schreibt etwa 30 KB Metadaten in jede exportierte SVG-Datei (XMP-RDF-Block mit Bearbeitungs-Historie, Tool-Versionsangaben, Lizenz-Informationen). Inkscape ähnlich. Beide Editoren legen außerdem oft ungenutzte Templates und Farbprofile als "<defs>" an, die im finalen Bild gar nicht vorkommen. Diese Information ist für die Anzeige irrelevant und gehört im Web-Output bereinigt. Sketch- und Figma-Exporte sind hier deutlich besser, aber auch nicht perfekt. Warum SVG für Logos und Icons immer die erste Wahl ist. Vektorgrafiken haben gegenüber Rastergrafiken vier strukturelle Vorteile. Erstens: Auflösungsunabhängigkeit — kein Retina-Problem, kein Multi-Resolution-Export mehr. Zweitens: Stylbarkeit per CSS — Farben, Strokes und Filter können dynamisch geändert werden, ohne dass eine neue Datei generiert wird. Drittens: Animierbarkeit — sowohl per CSS-Transitions als auch per SMIL oder JavaScript. Viertens: Barrierefreiheit — SVG kann textuelle Beschreibungen, Titel und ARIA-Attribute enthalten, die Screenreader vorlesen. Inline vs. extern. Eine wichtige Performance-Entscheidung: SVGs können als externe Datei ("<img src="logo.svg">