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.

SVG-Optimierer

Minimiere SVG: entferne Kommentare, Metadaten und Editor-Reste und reduziere Leerzeichen.

Dein SVG wird lokal in deinem Browser optimiert und nichts wird auf einen Server hochgeladen.

Musst du auch Rasterbilder verkleinern? Probiere den Image Optimizer.

Über SVG-Optimierer

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.

Beispiel

Eingabe

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <!-- Herz-Icon -->
  <title>Herz</title>
  <path d="M12 21 4 13a4 4 0 1 1 8-5 4 4 0 1 1 8 5z"/>
</svg>

Ausgabe

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 21 4 13a4 4 0 1 1 8-5 4 4 0 1 1 8 5z"/></svg>

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.