SVG-Viewer & Minifier

Was ist ein SVG-Viewer und Minifier?#

SVG ist das Format der Wahl für Icons, Logos und Linienkunst im Web — es bleibt bei jeder Größe scharf und ist als Text bearbeitbar. Aber SVG-Dateien, die von Design-Tools exportiert werden, tragen viel Ballast: Inkscape- und Sodipodi-Editor-Namespaces, <metadata>-Blöcke, Autoren-Kommentare und Leerzeichen zwischen jedem Tag. Dieser Ballast bläht die Datei auf und bereitet jedem, der die Quelle liest, Kopfschmerzen. Ein SVG-Minifier entfernt, was die Darstellung nicht beeinflusst, und meldet, wie viel er gespart hat.

Diese Seite ist sowohl Viewer als auch Minifier. Fügen Sie links SVG-Quelle ein, sehen Sie sie rechts gerendert, schalten Sie auf Minifizieren, um einen selbst geschriebenen Bereinigungs-Durchlauf auszuführen, der Kommentare, Metadaten, Editor-Namespaces und Leerzeichen zwischen Elementen entfernt, und lesen Sie die Byte-Ersparnis ab. Die Vorschau wird über eine Image-Data-URI gerendert, sodass jedes im SVG eingebettete Skript nie ausgeführt wird — Sie können eine nicht vertrauenswürdige Datei sicher inspizieren.

Verwendung#

1. Fügen Sie Ihr SVG in die Eingabe-Fläche links ein, oder klicken Sie auf Beispiel, um ein kleines Beispiel zu laden.
2. Die Ausgabe-Fläche und die Vorschau aktualisieren sich sofort. Standardmäßig steht die Werkzeugleiste auf Minifizieren, sodass die Ausgabe das bereinigte, kleinere SVG ist.
3. Schalten Sie auf Original, wenn die Ausgabe die unveränderte Originalquelle zeigen soll (nützlich zum Vergleichen mit der minifizierten Version).
4. Lesen Sie das Statistik-Panel unter den Flächen:
   • Vorher / Nachher / Gespart — die UTF-8-Größe der Eingabe gegenüber der Ausgabe und der prozentual gesparte Anteil.
   • Entfernt-Zusammenfassung — wie viele Kommentare, Metadaten-Blöcke, Editor-Elemente, Editor-Attribute und Leerzeichen-Knoten entfernt wurden.
   • ViewBox — die width-/height-/viewBox-Geometrie, die vom Wurzel-<svg> abgelesen wird, damit Sie die Zeichenfläche auf einen Blick bestätigen können.
5. Verwenden Sie Kopieren oder Herunterladen in der Ausgabe-Fläche, um das minifizierte SVG zu übernehmen. Verwenden Sie Leeren, um beide Flächen zu löschen.

Hauptfunktionen#

• Ein echter, von Grund auf geschriebener Minifier — nicht svgo. svgo ist das Standard-Node-Tool, aber es hängt von Nodes fs und path ab und läuft nicht sauber im Browser. Diese Seite liefert ihren eigenen Baum-Durchlauf, sodass sie ohne serverseitige Abhängigkeiten funktioniert.
• Fünf Ballast-Kategorien entfernt. Kommentare, <metadata>-Blöcke, Inkscape/Sodipodi-Namespace-Elemente und -Attribute sowie Leerzeichen zwischen Elementen — jedes gezählt und gemeldet.
• Text-bewusste Leerzeichen-Behandlung. Leerzeichen innerhalb von <text>, <tspan>, <title>, <desc>, <style> und <script> wird erhalten, sodass Beschriftungen und eingebettetes CSS den Durchlauf überstehen.
• Sichere Vorschau. Das Rendering verwendet ein <img> mit einer Data-URI, die der Browser als nicht ausführendes Bild behandelt — im SVG eingebettete Skripte werden nicht ausgeführt. Sie können eine nicht vertrauenswürdige Datei ohne Risiko einfügen.
• Ehrliche Byte-Buchhaltung. Größen werden in UTF-8-Bytes gemessen (nicht Zeichenanzahl), sodass eine Datei mit CJK-Text oder Emoji ihre tatsächliche Übertragungsgröße meldet.
• 100 % lokal. Parsing und Serialisierung passieren in Ihrem Browser. Das SVG verlässt nie die Seite.

Ausführliches Beispiel#

Ein typischer Inkscape-Export könnte mit mehreren Zeilen von Editor-Namespace-Deklarationen und einem <metadata>-Block vor der eigentlichen Kunst beginnen:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="24" height="24" viewBox="0 0 24 24">
  <metadata id="metadata8">
    <rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format></cc:Work></rdf:RDF>
  </metadata>
  <!-- a checkmark path drawn by hand -->
  <path inkscape:connector-curvature="0" d="M5 13l4 4L19 7" stroke="#000" stroke-width="2" fill="none"/>
</svg>

Fügen Sie es ein, belassen Sie den Modus auf Minifizieren, und die Ausgabe kollabiert zu:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5 13l4 4L19 7" stroke="#000" stroke-width="2" fill="none"/></svg>

Das Statistik-Panel meldet grob vorher ~520 Bytes, nachher ~210 Bytes, gespart ~60 %, wobei die Entfernt-Zusammenfassung 1 Kommentar, 1 Metadaten-Block und 1 Editor-Attribut (inkscape:connector-curvature) zeigt. Das Häkchen wird in der Vorschau identisch gerendert — nichts, was die Zeichnung beeinflusste, wurde entfernt.

FAQ#

Führt dieses Tool im SVG eingebettete Skripte aus?#

Nein. Die Vorschau wird als <img src="data:image/svg+xml;base64,…"> gerendert, und über <img> geladene Bilder sind ein nicht-skriptender Kontext — der Browser führt kein <script> innerhalb dieses SVG aus. Das macht die Seite sicher zum Inspizieren von SVG-Dateien, die Sie nicht selbst verfasst haben. Das Quell-<script>-Tag bleibt jedoch in der minifizierten Ausgabe erhalten; ob es läuft, hängt davon ab, wie Sie das SVG später einbinden.

Warum nicht einfach svgo verwenden?#

svgo ist das richtige Werkzeug in einer Node-Build-Pipeline, aber es hängt von den fs- und path-Modulen von Node ab und läuft nicht sauber in einem Browser-Tab. Der Minifier dieser Seite ist ein in sich geschlossener Baum-Durchlauf ohne Node-Abhängigkeiten, sodass er vollständig clientseitig funktioniert — auf Kosten weniger aggressiver Optimierung als svgos tiefste Optimierungen.

Die Ersparnis ist gering bei meiner Datei.#

Dateien, die bereits von Hand verfasst wurden (keine Editor-Namespaces, kein Metadaten, keine Kommentare), haben wenig zu entfernen, sodass die Ersparnis nur wenige Prozent durch Leerzeichen betragen kann. Die größten Gewinne kommen von Design-Tool-Exporten — Inkscape, Illustrator — wo der Großteil des Ballasts entsteht.

Verändert die Minifizierung, wie das SVG rendert?#

Nein, für die Kategorien, die dieses Werkzeug entfernt: Kommentare, Metadaten, Editor-Namespaces und Leerzeichen zwischen Elementen tragen keine Rendering-Semantik. Leerzeichen innerhalb von Text-Elementen (<text>, <title>, <desc>, <style>, <script>) wird absichtlich erhalten, weil es dort tragend sein kann.