SVG-Optimierung: Von 100KB auf 10KB reduzieren

Dienstprogramme

Die Notwendigkeit der SVG-Optimierung

Nicht optimierte SVGs enthalten viele redundante Informationen—Editor-Metadaten, Standardattribute, übermäßige Präzision, Leerzeichen.

Quelle Typische Größe Optimiert Reduzierung
Figma-Export 45KB 5KB 89%
Illustrator-Export 80KB 8KB 90%
Inkscape-Export 120KB 12KB 90%
Handgeschriebenes SVG 15KB 3KB 80%

1. Bereinigung redundanter Informationen

Editor-Metadaten

<!-- Von Illustrator generierte redundante Informationen -->
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:serif="http://www.serif.com/"
     id="Artboard1"
     serif:id="Artboard 1"
     viewBox="0 0 800 600">
  <!-- serif:id, xmlns:serif usw. sind nutzlos -->
</svg>

<!-- Optimiert -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
</svg>

Standardattribute

<!-- Standardwerte müssen nicht explizit deklariert werden -->
<rect x="0" y="0" width="100" height="100" fill="black" stroke="none" opacity="1"/>

<!-- Optimiert -->
<rect width="100" height="100"/>
Attribut Standardwert Entfernungsbedingung
fill black Vom Elternelement geerbt
stroke none Kein Strich
opacity 1 Vollständig deckend
x / y 0 Am Ursprung
stroke-width 1 Standardbreite
font-size Geerbt Gleich wie Elternelement

2. Pfadoptimierung

Präzisionsreduzierung

<!-- 6 Nachkommastellen sind zu präzise -->
<path d="M12.345678 23.456789 L34.567890 45.678901"/>

<!-- 2 Nachkommastellen reichen meist (SVG-Koordinatensystem-Einheiten) -->
<path d="M12.35 23.46L34.57 45.68"/>
Präzision Größe Visueller Unterschied
6 Stellen 100% Keiner
3 Stellen 60% Keiner (in 1000px-Viewport unsichtbar)
2 Stellen 50% Minimal
1 Stelle 40% Für kleine Icons akzeptabel

Befehlszusammenführung

<!-- Mehrere L-Befehle können zusammengefasst werden -->
<path d="M10 20 L30 40 L50 60 L70 80"/>

<!-- Zusammengefasst (implizites L) -->
<path d="M10 20 30 40 50 60 70 80"/>

Kurvenvereinfachung

<!-- Komplexe Bézier-Kurve -->
<path d="M0 0C0.12 0.34 0.45 0.67 1 1C1.34 1.23 1.56 1.78 2 2"/>

<!-- Wenn die Krümmung nahezu linear ist, kann zu L vereinfacht werden -->
<path d="M0 0L1 1 2 2"/>

3. Formzusammenführung

Zusammenführung gleichartiger Elemente

<!-- Drei Kreise mit gleichem Stil -->
<circle cx="10" cy="10" r="5" fill="red"/>
<circle cx="30" cy="10" r="5" fill="red"/>
<circle cx="50" cy="10" r="5" fill="red"/>

<!-- Zusammengefasst zu einem Pfad -->
<path d="M5 10a5 5 0 1 0 10 0a5 5 0 1 0-10 0M25 10a5 5 0 1 0 10 0a5 5 0 1 0-10 0M45 10a5 5 0 1 0 10 0a5 5 0 1 0-10 0" fill="red"/>

Wiederverwendung mit <use>

<!-- Wiederholte Elemente mit <use> referenzieren -->
<defs>
  <circle id="dot" r="5" fill="red"/>
</defs>
<use href="#dot" x="10" y="10"/>
<use href="#dot" x="30" y="10"/>
<use href="#dot" x="50" y="10"/>

4. Automatische Optimierung mit SVGO

Installation

npm install -g svgo

Kommandozeilenverwendung

# Einzeldatei optimieren
svgo input.svg

# Ausgabe spezifizieren
svgo input.svg -o output.svg

# Stapeloptimierung
svgo -f ./icons/

# Optimierungsergebnis anzeigen
svgo input.svg --show-results

Konfigurationsdatei

// svgo.config.js
module.exports = {
  multipass: true,  // Mehrpass-Optimierung
  plugins: [
    'removeDoctype',
    'removeXMLProcInst',
    'removeComments',
    'removeMetadata',
    'removeEditorsNSData',
    'cleanupAttrs',
    'mergePaths',
    'convertShapeToPath',
    'convertTransform',
    'removeUnusedNS',
    'minifyStyles',
    'removeEmptyAttrs',
    'removeEmptyContainers',
    'removeHiddenElems',
    'cleanupNumericValues',
    {
      name: 'cleanupNumericValues',
      params: { floatPrecision: 2 },
    },
    {
      name: 'convertPathData',
      params: {
        floatPrecision: 2,
        transformPrecision: 2,
        makeArcs: true,
      },
    },
    'removeDimensions',  // width/height entfernen, viewBox verwenden
    'removeViewBox',     // Oder viewBox behalten, Dimensions entfernen
  ],
};

Node.js-API

const { optimize } = require('svgo');

const result = optimize(svgString, {
  path: 'icon.svg',
  multipass: true,
  plugins: [
    { name: 'cleanupNumericValues', params: { floatPrecision: 2 } },
  ],
});

console.log(result.data); // Optimiertes SVG

5. SVG mit dem Tool optimieren

Schritte

  1. Öffne das SVG-Formatierungs-Tool
  2. SVG-Code einfügen oder hochladen
  3. Klicke auf die Schaltfläche "Optimieren"
  4. Vergleiche vor und nach der Optimierung:
    • Originalgröße → Optimierte Größe
    • Reduzierungsprozentsatz
  5. Kopiere das optimierte Ergebnis oder lade es herunter

6. SVG-Sprite-Optimierung

Inline-Sprite

<!-- Versteckte SVG-Definitionen -->
<svg style="display:none">
  <symbol id="icon-home" viewBox="0 0 24 24">
    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
  </symbol>
  <symbol id="icon-search" viewBox="0 0 24 24">
    <path d="M15.5 14h-.79l-.28-.27A6.47 6.47 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5z"/>
  </symbol>
</svg>

<!-- Verwendung -->
<svg><use href="#icon-home"/></svg>
<svg><use href="#icon-search"/></svg>

Automatische Sprite-Generierung

// svg-sprite für automatische Generierung verwenden
const SVGSprite = require('svg-sprite');

const config = {
  mode: {
    symbol: true,  // <symbol>-Modus generieren
  },
  svg: {
    xmlDeclaration: false,
    doctypeDeclaration: false,
  },
};

const spriter = new SVGSprite(config);
// SVG-Dateien hinzufügen und kompilieren

7. Performance-Optimierungs-Checkliste

Optimierungsmaßnahme Effekt Priorität
Editor-Metadaten entfernen -20~40% P0
Numerische Präzision reduzieren -10~30% P0
Pfadbefehle zusammenführen -5~15% P1
Standardattribute entfernen -5~10% P1
Formen in Pfade umwandeln -5~10% P2
Leerzeichen/Kommentare entfernen -2~5% P2
Gzip/Brotli-Kompression -50~70% P0

Hinweis: SVG ist ein Textformat, Gzip/Brotli-Kompression ist sehr effektiv. Stelle sicher, dass sie serverseitig aktiviert ist.

#SVG#图片优化#图标#压缩#前端