SVGO: SVG optimieren und benötigte Struktur erhalten

Um ein SVG mit SVGO zu optimieren, ohne seine Verwendung auf einer Seite zu beschädigen, behalte das Original, identifiziere die Struktur, von der deine Seite abhängt, und teste dann eine separat optimierte Kopie auf dieser Seite. Eine kleinere Datei und eine unveränderte eigenständige Vorschau beweisen nicht, dass CSS-Selektoren, Skripte oder Referenzen weiterhin funktionieren.

Unser eigenes Abzeichen macht diesen Unterschied sichtbar. Das Standard-Preset von SVGO reduzierte seinen Quelltext von 437 auf 263 Bytes, entfernte aber die ID, mit der das umgebende HTML die Sonne umfärbte. Das Deaktivieren von cleanupIds erzeugte eine Kopie mit 281 Bytes, die den Hook erhielt. Diese Messungen beschreiben diese eine Testgrafik mit SVGO 4.1.0, keine Kompressionsgarantie für andere Grafiken.

SVGO bearbeitet vorhandenes SVG-Markup. Wenn du nur ein PNG oder JPG hast, erstelle oder rekonstruiere zuerst Vektorgeometrie. Optimierung kann die Objekte innerhalb einer Bitmap nicht in bearbeitbare Pfade verwandeln.

Entscheide, welche SVG-Struktur erhalten bleiben muss

Unterscheide vor dem Optimieren zwischen sichtbaren Bestandteilen und solchen, auf die ein anderes Dokument oder eine Anwendung verweist. Das SVGO-Standard-Preset enthält Operationen, die IDs, Gruppen, Stile und Pfaddaten ändern. Eine Integration kann auch einen anderen Plugin-Satz wählen. Prüfe deshalb die Konfiguration des Werkzeugs, das deine Datei tatsächlich verarbeitet.

Das sind separate Prüfungen. Das Erhalten einer ID erhält nicht jede Gruppe, jeden Knoten oder jedes bearbeitbare Objekt. Ebenso belegt ein korrektes Rendering nicht, dass ein Editor deine bevorzugte Ebenenstruktur wiederherstellt. Behalte eine bearbeitbare Masterdatei und erstelle eine Ausgabekopie für den Zielkontext.

Für wiederverwendbare Symbole behandelt der SVG-Sprite-Leitfaden die Verwendung dieser Referenz durch die Anwendung. Dieser Artikel konzentriert sich darauf, was ein Optimierungsschritt ändern kann, bevor die Anwendung die Datei erhält.

Reproduziere einen defekten externen CSS-Hook

Verwende einen leeren Arbeitsordner mit verfügbarem Node.js und npm. Speichere diese von Hand erstellte Illustration als input.svg, einschließlich des abschließenden Zeilenumbruchs. Sie ist eine Konfigurationstestdatei, kein PerfectVector-Konvertierungsergebnis.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
  <title>Mountain badge</title>
  <!-- Original illustration for an SVGO configuration test. -->
  <metadata>Editable master: preserve the badge-accent CSS hook.</metadata>
  <path d="M80 12 139 46v68l-59 34-59-34V46Z" fill="#157d78"/>
  <circle id="badge-accent" cx="108" cy="53" r="12" fill="#ef8067"/>
  <path d="m38 111 32-49 21 30 10-15 25 34Z" fill="#fffdf5"/>
</svg>

Installiere die für dieses Beispiel verwendete genaue Version und erstelle dann eine neue Ausgabedatei:

npm install --save-exact svgo@4.1.0
npx svgo input.svg -o default.svg

Führe dies im leeren Ordner aus, damit eine vorhandene svgo.config.mjs keine unerwarteten Einstellungen liefert. Das offizielle SVGO-Repository dokumentiert separate Ausgabedateinamen und das Laden von Konfigurationen. Halte bei einem Projekt-Build Version und Konfiguration unter Versionskontrolle, damit ein Upgrade eine bewusste Änderung ist.

Öffne default.svg als Text. Sein Kreis hat weiterhin eine korallfarbene Füllung, aber die ID badge-accent fehlt. Diese ID wurde innerhalb des SVG-Dokuments nicht referenziert. Die cleanupIds-Dokumentation erklärt, dass das Plugin ungenutzte IDs entfernt und referenzierte verkürzt. Der Selektor einer externen Seite liegt außerhalb der Eingabe dieser Testdatei.

Um die Folge zu sehen, platziere das SVG-Markup direkt in einer HTML-Seite mit diesem Stil außerhalb des SVG:

<style>
  #badge-accent { fill: #f5bf42; }
</style>

Verwende für diesen Test eine Kopie pro Seite. Die Sonne des ursprünglichen SVG wird goldfarben, weil der Selektor passt. Die standardmäßig optimierte Sonne bleibt korallfarben, weil ihre ID fehlt. Das Laden einer der Dateien über ein img-Element wäre ein anderer Test: Die Hostseite würde dabei keine innere Form desselben Dokuments auswählen.

Erhalte den Hook und wiederhole den Test

Speichere dies im selben Ordner als svgo.config.mjs:

export default {
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          cleanupIds: false,
        },
      },
    },
  ],
};

Schreibe jetzt eine weitere Kopie:

npx svgo input.svg --config svgo.config.mjs -o preserved.svg
wc -c input.svg default.svg preserved.svg

Die Überschreibung deaktiviert dieses eine Plugin und behält den Rest des Standard-Presets. Sie ist ein Ausgangspunkt für die demonstrierte ID-Abhängigkeit. Sie ist keine universell sichere Konfiguration für beliebige Grafik, Animation, Barrierefreiheitsbeziehungen oder anwendungsspezifische Struktur.

Wir führten die obigen Befehle in einem leeren Ordner aus und verarbeiteten die entsprechenden Konfigurationen unabhängig durch die JavaScript-API von SVGO 4.1.0. CLI- und API-Ausgaben waren bytegleich, ohne zusätzlichen abschließenden Zeilenumbruch in den optimierten Dateien. Anschließend renderten wir jedes Ergebnis in einem eigenen HTML-Dokument mit derselben externen CSS-Regel. Der Browser meldete diese Ergebnisse:

Die ID-erhaltende Ausgabe sparte 156 Bytes, etwa 35,7 % dieser Quelle. Sie kostete 18 Bytes mehr als die Standardausgabe und erhielt das benötigte Verhalten. Leerraum, Zeilenenden, Versionen und Ausgabeformatierung können deine Bytezahlen ändern.

Alle drei Kopien behielten in diesem Test viewBox="0 0 160 160". Wir prüften das sichtbare Ergebnis und die berechnete Browser-Füllung. Wir maßen keine Netzwerkübertragungszeit und testeten nicht jeden Browser, Editor, jede SVG-Funktion oder Build-Integration.

Passe Einstellungen für eine konkrete Abhängigkeit an

Wenn nur wenige IDs öffentliche Hooks sind, bietet cleanupIds auch die Optionen preserve und preservePrefixes. Verwende sie, wenn du die Abhängigkeit benennen kannst, und wiederhole dann denselben Test in der verwendenden Anwendung. Wenn mehrere SVGs gemeinsam inline eingebunden werden, prüfe auch doppelte IDs. Das Erhalten einer bereits doppelten ID macht sie nicht eindeutig; beim Umbenennen einer ID musst du die darauf verweisenden Stellen aktualisieren.

Ein Stil oder Skript innerhalb des SVG kann das Verhalten des Optimierers ändern. Die cleanupIds-Dokumentation beschreibt einen Schutzmechanismus, der bei solchen Elementen zurückhaltender vorgeht. Übertrage diesen Schutz nicht auf CSS in einem anderen Dokument und erzwinge keine Bereinigung, ohne zu verstehen, welche Referenzen von den IDs abhängen.

Behandle numerische Genauigkeit separat. Weniger Dezimalstellen können das Markup verkleinern, doch die akzeptable Änderung hängt vom Koordinatenmaßstab und der endgültigen Darstellungsgröße der Grafik ab. Prüfe kleine Lücken, Ecken und Kurven in den Größen, in denen die Grafik verwendet wird. Eine erfolgreiche ID-Prüfung sagt nichts über diese Details aus.

Behalte viewBox, wenn dein Layout von ihrem Skalierungsverhalten abhängt. Die removeViewBox-Plugin-Dokumentation warnt vor Folgen für Skalierung und Beschneidung. Es ist nicht im dokumentierten Standard-Preset enthalten, das hier verwendet wird; es ausdrücklich hinzuzufügen ist eine separate Entscheidung. Kopiere keine alte Konfiguration, ohne zu prüfen, für welche Version und welches Preset sie geschrieben wurde.

Bei einer stark nachgezeichneten Kontur beantworten Markup-Optimierung und bewusste Knotenbereinigung ebenfalls unterschiedliche Fragen. Verwende den SVG-Knotenleitfaden, um zu beurteilen, ob die Geometrie vereinfacht werden muss, und vergleiche die Silhouette nach der Bearbeitung. Ein kleinerer Quelltext bedeutet nicht automatisch einen saubereren Schneidepfad.

Prüfe die Ausgabekopie dort, wo sie verwendet wird

Platziere die optimierte Datei nach der Konfigurationswahl im tatsächlichen Zielablauf. Prüfe den Standardzustand und alle Hover-, Auswahl-, Theme- oder Animationszustände, die davon abhängen. Eine statische Vorschau kann einen Selektor übersehen, der erst nach einer Interaktion greift.

Prüfe bei einer Webgrafik neben deiner lokal optimierten Datei auch die endgültige Build-Ausgabe. Ein Framework oder Bundler kann später seine eigene Optimierung ausführen. Wiederhole den Test, wenn sich das ausgelieferte Markup unterscheidet.

Öffne bei einer bearbeitbaren Übergabe die Kopie im vorgesehenen Editor und wähle die Teile aus, die der Empfänger benötigt. Bestätige kleine Schrift, Löcher, separate Farben und Beschneidung. Behalte die Quell-Masterdatei, auch wenn die Webkopie alle Prüfungen besteht.

Dateioptimierung ist außerdem getrennt von Transportkompression. Der Leitfaden SVGZ gegenüber SVG demonstriert einen gzip-Durchlauf, der identische Quellbytes wiederherstellt. SVGO ändert diese Quelle vor der Auslieferung; gzip kann diese Bytes danach kodieren. Vergleiche jede Operation mit ihrem eigenen Ziel.

Wann Vektorisierung vor die Optimierung gehört

Wenn die Vektor-Masterdatei fehlt und die einzige Quelle ein flaches PNG oder JPG ist, kann PerfectVectors Bild-zu-Vektor-Ablauf einen SVG-Kandidaten vorbereiten. Vergleiche das Ergebnis mit der Quelle und prüfe Löcher, kleine Details und separate Bereiche, bevor du es akzeptierst. Füge nach der Grafikprüfung die IDs oder Gruppen hinzu, die deine Seite benötigt. Optimiere dann eine Ausgabekopie und teste diese Hooks.

PerfectVector ist kein Optimierer für ein vorhandenes SVG und rekonstruiert nicht die Selektoren deiner Webseite. Verwende eine vorhandene Vektor-Masterdatei. Behalte ein Foto als Rasterbild, wenn seine kontinuierlichen Tonwertdetails wichtiger sind als bearbeitbare Umrisse. Die Vektorvorbereitungsleitfäden im Blog behandeln diese Quellentscheidungen.

FAQ

Macht das Deaktivieren von cleanupIds jedes SVG sicher optimierbar? Nein. Es schützt IDs vor Entfernung und Verkürzung durch dieses Plugin, aber andere Plugins können weiterhin Stile, Gruppen, Formen oder Pfaddaten ändern. Prüfe die Funktionen und Referenzen, die dein Zielablauf verwendet.

Warum sieht ein optimiertes SVG allein richtig aus, aber auf meiner Seite falsch? Die eigenständige Vorschau führt möglicherweise kein externes CSS oder Skripte aus. In unserem Beispiel wurde die eigene korallfarbene SVG-Füllung normal gerendert, während das goldene Umfärben der Seite fehlschlug, weil die ausgewählte ID entfernt worden war.

Sollte ich meine einzige bearbeitbare Masterdatei optimieren? Behalte die Masterdatei und schreibe eine optimierte Ausgabekopie. Eine Datei kann nach Optimierung korrekt gerendert werden, während ihre Objektstruktur für spätere Bearbeitungen weniger nützlich ist.

Kann SVGO ein PNG in Vektorpfade verwandeln? Nein. SVGO verarbeitet SVG-Markup. Raster-zu-Vektor-Nachzeichnen ist eine frühere Operation, wenn die Grafik bearbeitbare Geometrie benötigt und keine geeignete Vektor-Masterdatei existiert.

Quellen

1. SVGO-Repository — Erklärt Installation, Befehlszeilenausgaben, Konfigurationsladen und die optimize-API.
2. SVGO-Standard-Preset — Listet seine Plugins auf und dokumentiert Überschreibungen und Integrationsunterschiede.
3. SVGO cleanupIds — Dokumentiert ID-Entfernung, Verkürzung, Erhaltungsoptionen und zugehörige Schutzmechanismen.
4. SVGO removeViewBox — Erklärt das Skalierungsrisiko beim expliziten Entfernen der viewBox.

Behalte die kleinste Kopie, die deine Grafik- und Verhaltensprüfungen besteht. Wenn der Ausgangsdatei noch bearbeitbare Vektorgeometrie fehlt, bereite aus deiner Rastergrafik ein SVG vor, prüfe seine Formen und erhalte die hinzugefügten Hooks, bevor du die Ausgabekopie optimierst.