Softonic

SVG komprimieren

Schritt 1 / 2
Nächste

Ein aus Figma, Illustrator oder Sketch exportiertes SVG hat typischerweise 2-5x mehr Markup als nötig: Editor-Namensräume, Kommentare, leere Gruppen, redundante Transformationen und 6-dezimale Koordinaten. Dieses Tool führt Ihr SVG durch einen SVGO-ähnlichen Prozess, entfernt den Lärm und hält die gerenderte Ausgabe pixelgenau.

So komprimieren Sie ein SVG

  1. 1

    Fügen Sie Ihr SVG ein oder laden Sie es hoch

    Akzeptiert rohen XML-Text oder eine .svg-Datei.

  2. 2

    Wählen Sie ein Optimierungsniveau

    Sicher (Kommentare und Editor-Metadaten entfernen), aggressiv (Gruppen zusammenfassen, Koordinaten runden, Pfade zusammenführen) oder benutzerdefiniert.

  3. 3

    Überprüfen Sie den Unterschied

    Vergleichen Sie die Byte-Anzahl vor und nachher und sehen Sie sich das gerenderte Ergebnis an, um zu bestätigen, dass sich visuell nichts geändert hat.

  4. 4

    Kopieren oder herunterladen

    Fügen Sie das optimierte SVG direkt in Ihren Code ein oder speichern Sie es als Datei.

Was ein SVG aufbläht

Öffnen Sie ein aus Figma exportiertes SVG in einem Texteditor und Sie werden typischerweise Folgendes sehen:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="..."
     xmlns:sketch="..." width="24.000000" height="24.000000"
     viewBox="0 0 24.000000 24.000000" ...>
  <!-- Generator: Figma ... -->
  <title>icon</title>
  <desc>Erstellt mit Figma</desc>
  <g id="Page-1" stroke="none" fill="none" fill-rule="evenodd">
    <g id="icon" transform="translate(0.000000, 0.000000)">
      <path d="M12.000000,2.000000 L..." fill="#000000"/>
    </g>
  </g>
</svg>

Fast jede Zeile ist entfernbar. Die gerenderte Ausgabe benötigt nur das svg, viewBox und path.

Was der Optimierer entfernt

Entfernt Warum sicher
XML-Kommentare Nie gerendert
Editor-Namensräume (sketch, figma) Von Browsern nicht verwendet
<title> / <desc> (optional) Zugänglicher Text, behalten, wenn sinnvoll
Leere <g>-Gruppen Keine visuelle Auswirkung
Standardattributwerte Browser verwenden ohnehin Standardwerte
Identitäts-Transformationen translate(0,0) bewirkt nichts
Koordinatennachkommastellen 3 Nachkommastellen sehen auf dem Bildschirm identisch aus
Unbenutzte IDs Nur IDs behalten, die anderswo referenziert werden

Fallstricke

  • Entfernen Sie keine IDs, die von CSS oder durch url(#...) in Füllungen, Masken, Filtern referenziert werden. Der aggressive Modus kann Farbverläufe beschädigen.
  • Behalten Sie viewBox. Ohne es wird das SVG nicht responsiv skaliert.
  • Behalten Sie <title>, wenn Sie darauf für die Barrierefreiheit angewiesen sind (Screenreader kündigen es an).
  • Vermeiden Sie das Zusammenfassen von <use>-Instanzen. Der Optimierer kann sie inline setzen und das Muster der Quelle verlieren.

Wann die Kompression echte Bytes spart

SVG ist Text, was bedeutet, dass gzip auf dem Server bereits viel von der Redundanz entfernt. Ein SVG, das von 4KB auf 1KB unkomprimiert fällt, könnte über die Leitung nur von 1.2KB auf 0.7KB fallen. Immer noch lohnenswert, und die kleinere Quelle ist leichter zu lesen.

Häufig gestellte Fragen

Der sichere Modus wird das nicht tun. Der aggressive Modus kann IDs entfernen, die von CSS oder SMIL-Animationen referenziert werden, wenn Ihr SVG Animationen hat, verwenden Sie den sicheren Modus oder genehmigen Sie die IDs manuell.

Figma/Illustrator-Exporte schrumpfen typischerweise um 50-80%. Handgeschriebenes SVG ist bereits kompakt und fällt normalerweise nur um 10-20%.

Standardmäßig ja, <title>, <desc> und aria-*-Attribute werden beibehalten. Sie können sich entscheiden, sie zu entfernen, wenn das SVG rein dekorativ ist und das umgebende HTML das Label bereitstellt.

Ja. Das xmlns-Attribut wird beibehalten, da es erforderlich ist, wenn SVG direkt in HTML eingefügt wird. Inline-SVG ist normalerweise die schnellste Liefermethode für kleine Icons.

Verwandte Tools

Graffiti-Generator

Erstelle Graffiti-Schrift mit Tag-, Bubble-, Block-, Stencil-, Neon- und Wild-Effekten. Passe Farben an und exportiere PNG oder SVG direkt im Browser.

Favicon-Generator für Initialen und Emojis

Erstellen Sie ein Favicon aus ein oder zwei Initialen oder einem Emoji. Wählen Sie Form und Hintergrundfarbe; bei Initialen können Sie zusätzlich Zeichenfarbe und Schriftstil anpassen.

QR-Code-Generator

Erstellen Sie einen QR-Code lokal im Browser aus URL, Klartext oder einer korrekt formatierten QR-Nutzlast und laden Sie ihn als PNG herunter.

Fotoeditor

Browser-basierter Fotoeditor mit Zuschneiden, Drehen, Helligkeit, Kontrast, Sättigung, Filtern, Textüberlagerung und Export nach JPG, PNG oder WebP.

Online-Whiteboard

Ideen zeichnen, Formen, Notizen und lokale Bilder auf einem privaten Browser-Whiteboard anordnen und als PNG, JPEG, SVG oder JSON exportieren.

Barcode-Generator

Erstellen Sie im Browser 1D-Barcodes in Code 128, EAN, UPC, ITF-14 und weiteren unterstützten Formaten und laden Sie SVG oder PNG herunter.