Dieser SVG-Optimierer minifiziert SVG-Markup, sodass deine Icons und Grafiken kleiner ausgeliefert werden und schneller laden. Füge ein aus Figma, Illustrator, Inkscape oder Sketch exportiertes SVG ein, und das Tool entfernt den XML-Prolog, Doctype, Kommentare, Metadaten und editorspezifischen Ballast von Inkscape, Sodipodi und Adobe und kollabiert dann den Leerraum, um Bytes zu sparen. Du kannst optional die Wurzel-Attribute width und height weglassen, sodass die viewBox die Grafik für responsive Layouts vollständig skalierbar hält. Es ist eine praktische, leichtgewichtige SVGO-Alternative für Frontend-Entwickler, Designer und alle, die SVG minifizieren oder Icons inline in HTML, CSS oder React-Komponenten einbetten müssen. Alles wird lokal in deinem Browser verarbeitet, und das Tool meldet die Byte-Anzahl vorher und nachher, sodass du genau siehst, wie viel kleiner deine Datei wurde.
Funktionen
Entfernt XML-Prolog und DOCTYPE-Deklarationen, die Inline- und Web-SVGs nicht brauchen
Entfernt Kommentare, um exportiertes Markup aufzuräumen
Löscht Metadaten-, title- und desc-Elemente, die die Dateigröße aufblähen
Bereinigt Editor-Ballast von Inkscape, Sodipodi und Adobe, einschließlich namensraumbehafteter Attribute
Entfernt optional Wurzel-width und -height, sodass die viewBox die Grafik skalierbar hält
Kollabiert Leerraum und überflüssigen Abstand zwischen Tags
Zeigt die optimierte Byte-Anzahl und den gesparten Prozentsatz
Schalte jede Bereinigung ein oder aus, sodass du genau das Markup behältst, das du brauchst
So verwendest du SVG-Optimierer
Füge deine SVG-Quelle in das Eingabefeld ein.
Schalte die Optionen für Kommentare, Metadaten, Editor-Daten, Abmessungen und Leerraum nach Bedarf um.
Lies die optimierte Ausgabe und die darüber angezeigte Byte-Ersparnis.
Kopiere das optimierte SVG und füge es in dein Projekt ein.
Prolog, Kommentar und Titel entfernt, Leerraum kollabiert.
Häufige Fehler & Fehlerbehebung
Die Grafik verschwindet oder sieht nach dem Entfernen der Abmessungen falsch dimensioniert aus. — Das Entfernen von width und height funktioniert nur, wenn das SVG eine viewBox hat. Hat es keine viewBox, lasse den Abmessungs-Schalter aus.
Eine von deinem CSS oder JavaScript referenzierte ID oder Beschriftung wurde wegbereinigt. — Die Editor-Daten-Option entfernt data-name und namensraumbehaftete Editor-Attribute. Schalte sie aus, wenn dein Code von diesen Haken abhängt.
Barrierefreiheit bricht, weil title und desc entfernt wurden. — Die Metadaten-Option entfernt title- und desc-Elemente. Deaktiviere sie, wenn du sie für Screenreader-Beschriftungen brauchst.
Die Ausgabe ist nach dem Einfügen leer. — Der Optimierer braucht tatsächliches SVG-Markup; stelle sicher, dass du das vollständige svg-Element eingefügt hast und nicht nur einen Dateipfad oder ein Binärbild.
Häufig gestellte Fragen
Was ist der SVG-Optimierer und was entfernt er?
Es ist ein SVG-Minifier im Browser, der den XML-Prolog, Doctype, Kommentare, Metadaten, title und desc sowie Editor-Ballast von Tools wie Inkscape, Sodipodi und Adobe entfernt und dann Leerraum kollabiert. Du steuerst jeden Schritt mit Schaltern.
Wie minifiziere ich ein SVG mit diesem Tool?
Füge dein SVG-Markup in das Eingabefeld ein, schalte die gewünschten Bereinigungen um und kopiere dann die optimierte Ausgabe. Die Byte-Anzahl und der gesparte Prozentsatz erscheinen über dem Ergebnis, sodass du die Verkleinerung bestätigen kannst.
Ändert das Optimieren, wie mein SVG aussieht?
Nein, die Standardeinstellungen entfernen nur nicht-visuelle Daten und Leerraum. Visuelle Pfade und Formen bleiben erhalten, sodass die gerenderte Grafik identisch bleibt.
Sollte ich die Attribute width und height entfernen?
Lasse sie nur weg, wenn dein SVG eine viewBox hat. Die viewBox hält die Grafik skalierbar, was ideal für responsive und CSS-dimensionierte Icons ist.
Wie unterscheidet sich der SVG-Optimierer von SVGO?
Es ist ein leichtgewichtiger, abhängigkeitsfreier Optimierer, der die häufigsten SVGO-Bereinigungen im Browser abdeckt, ohne ein Build-Tool oder Node-Setup zu installieren.
Wird mein SVG irgendwohin hochgeladen?
Nein. Der SVG-Optimierer verarbeitet dein Markup lokal in deinem Browser, sodass deine Daten dein Gerät nie verlassen und nichts auf einen Server hochgeladen wird.
Verwandte Tools
CSS-/SCSS-Formatierer — Verschönere oder minimiere CSS/SCSS/LESS, sortiere Eigenschaften und entferne Duplikate.
HTML-Formatierer — Verschönere oder minimiere HTML, formatiere eingebettetes CSS/JS und zeige eine Vorschau.
XML-Formatierer — Verschönere, minimiere und validiere XML und konvertiere XML ↔ JSON.
JS-/TS-Formatierer — Verschönere JavaScript, TypeScript und JSX/TSX mit Prettier-Optionen oder minimiere reines JavaScript.
Bildoptimierer — Bilder neu kodieren und verkleinern (JPEG/WebP/PNG), mit optionaler Größenänderung.
Bildformat-Konverter — Konvertiere Bilder zwischen PNG, JPEG und WebP – vollständig in deinem Browser.
Open-Graph-Generator — Erzeuge Open-Graph- und Twitter-Meta-Tags mit Vorschau der Social-Card.
Mermaid-Diagramm-Renderer — Rendere Mermaid-Diagramme (Fluss, Sequenz, Gantt) als SVG in deinem Browser.
Weitere Code-Formatierer-Tools
MongoDB-Query-Beautifier — Verschönere und rücke MongoDB-Abfragen und find()-Anweisungen in deinem Browser ein.