SVG optimieren
SVG optimieren im Browser: Kommentare, Metadaten und Editor-Attribute entfernen, Zahlen runden und Leerraum streichen, mit Vorschau vorher und nachher.
Alles läuft in Ihrem Browser. Eingaben verlassen Ihr Gerät nicht.
SVG verkleinern ohne Qualitätsverlust
SVG optimieren lohnt sich vor allem bei Grafiken aus Illustrator, Inkscape, Sketch oder Figma: Die Programme speichern Kommentare, Metadaten, Editor-Einstellungen und Koordinaten mit sechs oder mehr Nachkommastellen, die der Browser nicht braucht. Das Werkzeug entfernt diesen Ballast, rundet Zahlen und streicht überflüssigen Leerraum. So lässt sich eine SVG verkleinern, oft um ein Drittel oder mehr, ohne dass sich das Bild sichtbar ändert.
Zum SVG bereinigen gehören hier: XML-Kommentare, das Element metadata, Inkscape-Metadaten wie sodipodi:namedview und inkscape:-Attribute, Namensräume von Sketch und Adobe, das Attribut version und leere Gruppen. Beim SVG komprimieren durch Runden werden Pfaddaten, Koordinaten, viewBox und Transformationen auf die gewählte Zahl von Nachkommastellen gekürzt. Prüfen Sie im Vorher-nachher-Vergleich, ob alles noch passt; bei sehr kleinen viewBox-Werten wie 0 0 1 1 sollten Sie mehr Nachkommastellen behalten.
Im Unterschied zu einem reinen SVG minify, das nur Leerzeichen entfernt, versteht das Werkzeug die Struktur über den XML-Parser des Browsers und gibt sauberes XML aus. Grenzen: Pfade werden nicht neu berechnet oder zusammengeführt, und Formen werden nicht in kürzere Pfade umgewandelt. title und desc bleiben standardmäßig erhalten, weil Screenreader sie vorlesen. Für noch kleinere Dateien liefern Sie SVG zusätzlich mit gzip oder Brotli aus.
Anleitung: SVG optimieren in 4 Schritten
- Über „SVG-Datei wählen“ eine Datei laden oder den Code in das Feld „SVG-Code“ einfügen.
- Unter „Zahlen runden auf“ die Nachkommastellen festlegen oder „nicht runden“ wählen.
- Die Optionen setzen: Kommentare, Metadaten, Editor-Attribute, Leerraum, leere Gruppen sowie title und desc entfernen.
- Vorher und Nachher vergleichen und das optimierte SVG kopieren oder herunterladen.
Typische Anwendungsfälle
- Icons aus Illustrator, Inkscape oder Figma vor dem Einbau in eine Website verkleinern.
- SVG für die Einbettung direkt im HTML oder als Data-URI im CSS vorbereiten.
- Logos von Editor-Metadaten befreien, bevor sie an Kunden oder in ein Repository gehen.
Häufige Fragen
Wie viel kleiner wird eine SVG?
Das hängt vom Programm ab, das sie erzeugt hat. Exporte aus Grafikprogrammen schrumpfen oft deutlich, weil viele Metadaten und lange Zahlen enthalten sind. Bereits optimierte Dateien werden kaum kleiner. Das Werkzeug zeigt die genaue Ersparnis in Byte und Prozent.
Verändert das Runden das Bild?
Bei zwei Nachkommastellen und üblichen Icon- oder Logo-Größen sieht man keinen Unterschied. Bei sehr kleinen Koordinatensystemen kann Runden Formen verschieben; dann wählen Sie mehr Nachkommastellen oder schalten das Runden ab.
Was sind Inkscape-Metadaten?
Inkscape speichert eigene Angaben wie Fensterposition, Zoom und Ebenennamen in Elementen und Attributen mit den Präfixen sodipodi: und inkscape:. Für die Darstellung im Browser sind sie überflüssig.
Warum bleiben title und desc erhalten?
Diese Elemente beschreiben die Grafik für Screenreader und erscheinen teils als Tooltip. Sie sind wichtig für die Barrierefreiheit und deshalb standardmäßig geschützt.
Ist das Werkzeug ein Ersatz für SVGO?
Für das schnelle Bereinigen einzelner Dateien ja. SVGO kann zusätzlich Pfade zusammenführen, Formen umwandeln und lässt sich in Build-Prozesse einbinden.
Wie exportiere ich aus Inkscape ein sauberes SVG?
Beim Speichern unter das Format „Optimiertes SVG“ oder „Normales SVG“ statt „Inkscape-SVG“ wählen; dann fallen die meisten inkscape:- und sodipodi:-Angaben weg. Reste lassen sich hier entfernen.
Ist SVG oder PNG für Logos besser?
Für Logos und Icons ist SVG meist besser, weil die Datei klein ist und in jeder Größe scharf bleibt. PNG braucht man, wenn ein Programm oder eine Plattform kein SVG annimmt, etwa bei manchen Profilbildern.
Das könnte auch helfen
Farbumwandler
HEX, RGB, HSL, HSV, CMYK und OKLCH ineinander umrechnen, mit Farbwähler, Vorschau und Farbtönen.
ÖffnenFarbpalette aus Bild
Die wichtigsten 5 bis 10 Farben eines Bildes als HEX-Codes ermitteln, lokal im Browser.
ÖffnenKontrast prüfen (WCAG)
Kontrastverhältnis zweier Farben nach WCAG prüfen, AA und AAA, mit Vorschlag für passende Farbtöne.
ÖffnenCSS-Gradient-Generator
Linearen, radialen und konischen Farbverlauf zusammenstellen und den CSS-Code kopieren.
ÖffnenBox-Shadow-Generator
CSS-Schatten mit mehreren Ebenen, inset und Deckkraft einstellen, Vorschau sehen, Code kopieren.
ÖffnenFlexbox-Generator
Flexbox-Eigenschaften per Auswahl setzen, die Wirkung live sehen und das CSS kopieren.
Öffnen