Zum Hauptinhalt springen
Bethemesh
Bilder & Grafiken

SVG optimieren

Reduziert SVG-Dateien durch Entfernen unnötiger Daten, ohne die Darstellung zu verändern.

  • Zwischenablage
  • Export

Dieses Widget einbetten

Passe die Darstellung an, prüfe die Vorschau und kopiere anschließend den Code.

Vorschau

Art des Einbettungscodes

Zu kopierender Code

Responsive und automatisch von Bethemesh in der Größe angepasst.

SVG-Code

Vorschau

Optimierungsoptionen

War dieses Werkzeug hilfreich?

Wie funktioniert dieses Tool?

Ein aus Inkscape, Illustrator oder Figma exportiertes SVG enthält oft mehr Text als Zeichnung: XML-Deklaration, Kommentare, Metadaten, editorspezifische Attribute und Koordinaten mit fünf Nachkommastellen. Dieser Optimierer entfernt diesen Ballast und rundet die Zahlen, ohne die Zeichnung in eine Rastergrafik umzuwandeln: Die Datei bleibt vektoriell, lesbar und bearbeitbar. Alles geschieht in deinem Browser.

Füge SVG-Code ein oder importiere eine .svg-Datei. XML-Deklaration und DOCTYPE werden immer entfernt; ein Kommentar vor dem svg-Tag, wie ihn Editoren oft schreiben, wird akzeptiert. Klicke auf SVG optimieren: Ergebnis, Vorschau und drei Werte erscheinen, Ausgangsgröße, optimierte Größe und Ersparnis in Byte und Prozent.

Vier Optionen sind standardmäßig aktiv: Kommentare entfernen, metadata-Blöcke entfernen, Inkscape- und Sodipodi-Daten entfernen (Attribute inkscape:, sodipodi: und ihre Namensräume) und Leerraum zwischen Tags reduzieren. Eine fünfte, standardmäßig aus, entfernt width und height vom svg-Wurzelelement, wenn eine viewBox existiert; Rechtecke und Bilder darin behalten ihre.

Die Dezimalgenauigkeit von 0 bis 8 Stellen (Standard 3) rundet die Zahlen in Attributwerten: Pfade, Koordinaten, viewBox, Transformationen. Überflüssige Nullen verschwinden (8.00000 wird 8, 0.5 wird .5). IDs, Klassen, Links und angezeigter Text bleiben unverändert. Kopiere den Code oder lade optimized.svg herunter.

So verwenden Sie dieses Tool

  1. SVG hinzufügen

    Füge den Code ein oder importiere eine vollständige .svg-Datei.

  2. Optionen einstellen

    Behalte die Standardwerte oder passe die Dezimalgenauigkeit an.

  3. Prüfen und exportieren

    Kontrolliere Vorschau und Ersparnis und kopiere oder lade das Ergebnis herunter.

Berechnung der angezeigten Ersparnis

Die Größen werden in UTF-8-Byte gemessen, vor und nach der Optimierung.

Ersparnis in Prozent

g = (o − n) ÷ o × 100

Für das Inkscape-Icon: (365 − 148) ÷ 365 × 100 = 59,5 %.

g
Ersparnis in Prozent
o
Ausgangsgröße in Byte
n
optimierte Größe in Byte

Anwendungsfälle

Icons einer Website

Verschlanke aus einem Editor exportierte Icons, bevor du sie ins HTML oder in ein Sprite einbindest.

Inline-SVG im Code

Erhalte kompaktes, sauberes Markup zum Einfügen in eine Komponente oder E-Mail.

Logo für eine Data-URI

Verkleinere das SVG, bevor du es in einem Stylesheet als Base64 kodierst.

Beispiele

Aus Inkscape exportiertes Icon

Standardeinstellungen. Die Zeichnung ist identisch: Nur unnötiger Text und Nachkommastellen ab der vierten sind verschwunden.

Eingabe

XML-Deklaration, Kommentar, metadata, inkscape:-Attribute, Pfad M12.34567 8.00000 L35.65433 8.00000 L24.00000 40.12345 Z — 365 Byte

Ergebnis

<path d="M12.346 8 L35.654 8 L24 40.123 Z" …> — 148 Byte, 217 Byte gespart (59,5 %)

Genauigkeit auf 1 reduziert

Eine Abweichung von 0,05 Einheiten ist bei einem 48-Einheiten-Icon unsichtbar, kann aber einen detaillierten Plan oder eine Karte verzerren: Prüfe die Vorschau.

Eingabe

Dasselbe Icon mit 48 × 48, Genauigkeit 1

Ergebnis

M12.3 8 L35.7 8 L24 40.1 Z — 142 Byte (61,1 %)

Tipps und bewährte Vorgehensweisen

  • Behalte die viewBox: Sie sorgt dafür, dass sich das SVG an jede Größe anpasst.
  • Entferne width und height nur, wenn CSS die Größe festlegt, sonst wird das Bild eventuell in voller Breite angezeigt.
  • Für ein Icon reichen meist 1 oder 2 Nachkommastellen; bei sehr detaillierten Zeichnungen behalte 3 oder mehr.
  • Bewahre die Quelldatei des Editors auf: Entfernte Daten (Ebenen, Hilfslinien) lassen sich aus dem optimierten SVG nicht zurückholen.

Quellen und Referenzen

Häufig gestellte Fragen

Ändert sich die Darstellung?

Bei einer gewöhnlichen Zeichnung mit den Standardoptionen nicht. Eine sehr niedrige Genauigkeit kann Punkte leicht verschieben: Vergleiche mit der Vorschau.

Werden Farben und IDs verändert?

Nein. Hex-Farben, id, class und Links bleiben erhalten, ebenso der Text in text-Tags.

Werden Illustrator- oder Figma-Daten entfernt?

Kommentare und metadata ja. Entfernt werden die proprietären Attribute von Inkscape und Sodipodi; die anderer Editoren bleiben.

Führt das Tool Pfade zusammen oder vereinfacht es Formen?

Nein. Es bereinigt den Code und rundet Zahlen, ohne die Geometrie umzuschreiben wie SVGO.

Bleibt die Datei bearbeitbar?

Ja, sie bleibt ein Text-SVG, das jeder Vektor- oder Code-Editor öffnen kann.

Wird mein SVG auf einen Server hochgeladen?

Nein. Die Optimierung übernimmt dein Browser.

Verwandte Werkzeuge

Mit diesen Werkzeugen weitermachen

Werkzeuge, die diesem ähnlich sind oder es ergänzen.

Ähnliche Werkzeuge

SVG konvertieren

SVG-Dateien mit Vorschau und Ausgabeeinstellungen in PNG, JPEG oder WebP konvertieren.

Bilder & GrafikenDieses Werkzeug verwenden

Favicon-Generator

Erstelle aus einem Bild ein favicon.ico und die PNG-Symbole einer Website (16 bis 512 px), direkt im Browser.

Bilder & GrafikenDieses Werkzeug verwenden

Auch interessant

LeitfadenBewährte MethodenFortgeschritten

SVG optimieren, ohne die Darstellung zu verändern

Lerne, unnötige Metadaten, Kommentare, Editor-Daten, Präzision und Attribute aus SVG zu entfernen, ohne Skalierbarkeit oder sichtbares Ergebnis zu beschädigen.

31. August 20265 min
LeitfadenFormateAnfänger

SVG: das Vektorformat verstehen

Verstehe, wie SVG Formen, Pfade, viewBox, CSS und XML kombiniert, warum es ohne klassisches Pixelraster skaliert und wann es fürs Web geeignet ist.

31. August 20265 min