Drei Möglichkeiten zur Verringerung der SVG -Dateigröße mit SVGO

In diesem Artikel werden drei Methoden zur Optimierung von SVG -Grafiken mithilfe von SVGO untersucht, einem beliebten Tool zum Reduzieren von Dateigrößen und zur Verbesserung der Website -Leistung. SVGO zeichnet sich aus, um unnötiges Markup zu entfernen, die Pfade zu vereinfachen und das Aufblähen von SVGs zu beseitigen, die häufig mit Designsoftware erstellt wurden, die nicht für die Webkonsum optimiert sind.

Schlüsselvorteile der SVG -Optimierung:

• reduziert die Dateigröße und führt zu schnelleren Ladezeiten der Website.
• verbessert die Leistung der Website und die Benutzererfahrung.
• Erstellt sauberer, effizienterer SVG -Code.

Warum SVGs optimieren?

Während SVGs Skalierbarkeit und Auflösung unabhängig bieten, enthalten sie häufig unnötige Daten (Kommentare, komplexe Pfade usw.), die die Dateigröße aufblasen. Dies gilt insbesondere für SVGs aus Designprogrammen oder Creative Commons -Ressourcen. Selbst selbst geschaffene SVGs können von der Optimierung profitieren, um editorspezifische Metadaten zu entfernen.

Beispiel für nicht optimierte und optimierte Code:

nicht optimiert:

<svg xmlns:rdf="https://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="https://www.w3.org/2000/svg" xmlns="https://www.w3.org/2000/svg" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" viewBox="0 0 1000 1000" version="1.1">
  <g inkscape:label="Katze" inkscape:groupmode="layer" id="layer1" transform="translate(0,-52.362183)"></g>
  ... More code here ...
</svg>

optimiert:

<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
  <g id="layer1" transform="translate(0,-52.362183)"></g>
  ... More code here ...
</svg>

Während manuelle Reinigung möglich ist, automatisiert SVGO diesen Vorgang effektiv.

Drei Möglichkeiten, SVGO zu verwenden:

1. node.js und svgo: node.js und npm installieren und dann svgo global installieren (npm install -g svgo). Optimieren Sie eine Datei mit svgo yoursvgfile.svg yoursvgfile.min.svg, um eine optimierte Kopie zu erstellen, ohne das Original zu überschreiben. Verarbeiten Sie mehrere Dateien mit dem Flag -f und passen Sie die Optimierung mit Plugins an (z. B. svgo yoursvgfile.svg --enable='removeComments,mergePaths').

2. GULP -Integration: Verwenden Sie gulp-svgmin innerhalb eines Gulp -Workflows für die automatisierte Optimierung. Dies integriert sich nahtlos in vorhandene Front-End-Build-Prozesse.

3. SVGOMG (Online-GUI): Eine benutzerfreundliche Weboberfläche (SVGOMG) bietet Echtzeitvoransichten, sodass Sie die Auswirkungen von Optimierungen überwachen und übermäßig aggressive Einstellungen vermeiden können, die die Bildqualität beeinträchtigen könnten.

Schlussfolgerung:

SVGO bietet mehrere Ansätze zur Optimierung von SVGs, Verbesserung der Website der Website und der Codesreinheit. Wählen Sie die Methode aus, die am besten zu Ihrem Workflow geeignet ist, egal ob es sich um die Befehlslinieneffizienz, automatisierte Gulp-Aufgaben oder das visuelle Feedback von SVGOMG handelt. Denken Sie daran, dass verantwortungsbewusstes Optimierungsabbau die Reduzierung der Dateigröße mit der Aufrechterhaltung der Bildqualität ausbalanciert.

(FAQS-Abschnitt für die Kürze weggelassen, kann jedoch auf der Bedürfnisse neu angepasst werden. Die Informationen sind bereits im Originaltext vorhanden.)

Das obige ist der detaillierte Inhalt vonDrei Möglichkeiten zur Verringerung der SVG -Dateigröße mit SVGO. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!