SVG online verbessern | SVG-Größe reduzieren | Awesome Toolkit

SVG Optimierer

SVG-Dateien verbessern: Kommentare, Metadaten und überflüssige Leerzeichen entfernen. Einsparungsbericht angezeigt.

Von Marshkalk

So verwenden Sie den SVG-Optimierer

  1. SVG-Code in das linke Feld einfügen oder eine .svg-Datei hochladen.
  2. Gewünschte Optimierungen auswählen.
  3. Auf Verbessern klicken, das bereinigte SVG erscheint rechts mit einem Einsparungsbericht.
  4. Ergebnis kopieren oder optimierte .svg-Datei herunterladen.

Was jede Option entfernt

  • Kommentare: <!-- ... -->-Blöcke, die von Design-Tools wie Illustrator, Figma oder Sketch hinterlassen wurden. Nichts zum gerenderten Ergebnis beitragend.
  • Metadaten: <metadata>-Tags und Editor-Namespaces (xmlns:inkscape, xmlns:sodipodi). Nur im Ursprungs-Design-Tool nützlich.
  • Versteckte Elemente: Knoten mit display:none oder visibility:hidden.
  • Leerzeichen reduzieren: unnötige Leerzeichen, Tabs und Zeilenumbrüche zwischen Tags.
  • Inline-Styles minifizieren: komprimiert Stilattributwerte durch Entfernen redundanter Leerzeichen.

Warum SVGs verbessern?

SVGs aus Illustrator oder Inkscape enthalten viel zusätzliches Markup, das für das Bearbeiten nützlich, für die Anzeige aber unnötig ist. Ein typisches Icon-SVG kann durch Entfernen dieser Metadaten um 30-70 % reduziert werden.

Für den Produktionseinsatz

Dieses Tool ist ein leichtgewichtiger clientseitiger Optimierer. Für einen Produktions-Build-Pipeline empfiehlt sich SVGO oder ein Bundler-Plugin (Vite, Webpack).

Datenschutz

Alle Optimierungen erfolgen im Browser. Kein SVG-Code wird an einen Server gesendet.