Dein SVG ist 10x größer als nötig

Exportiere ein Icon aus Illustrator. Prüfe die Dateigröße. Öffne es in einem Texteditor.

Du wirst finden: Metadaten, die niemand braucht, Dezimalstellen bis zur 15. Stelle, leere Gruppen, Editor-spezifischen Kram und Kommentare von 2019. Ein einfaches Logo wiegt 50KB, wenn es 3KB sein könnten.

SVG ist nur XML. Jedes unnötige Zeichen sind Bytes, die deine Nutzer herunterladen.

Was Design-Tools hinzufügen

Illustrator, Figma, Sketch – sie alle betten zusätzliche Daten ein:

<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     id="Layer_1" x="0px" y="0px" viewBox="0 0 100 100"
     style="enable-background:new 0 0 100 100;" xml:space="preserve">

Nichts davon ist fürs Rendern notwendig. Es sind Metadaten, damit das Design-Tool die Datei richtig wieder öffnen kann.

Das Präzisions-Problem

Design-Tools verwenden hochpräzise Koordinaten:

<path d="M12.374892749237,45.293847293847 L67.293847293847,89.374892749237"/>

Browser runden sowieso auf etwa 1-2 Dezimalstellen. All diese Ziffern sind verschwendete Bytes.

Besser:

<path d="M12.37,45.29 L67.29,89.37"/>

Dasselbe visuelle Ergebnis, Bruchteil der Größe.

Leere Gruppen und IDs

Export erstellt oft Strukturen wie:

<g id="Layer_1">
  <g id="icon">
    <g>
      <path d="..."/>
    </g>
  </g>
</g>

Drei verschachtelte Gruppen für einen Pfad. Jede Gruppe fügt Bytes hinzu. Entferne sie, außer sie tun etwas (wie Transforms oder Styles anwenden).

IDs sind ähnlich. id="XMLID_847_" auf jedem Element summiert sich. Behalte IDs, die du in CSS oder JavaScript referenzierst. Entferne den Rest.

Was optimieren

Metadaten entfernen. Kommentare, Editor-Infos, Namespaces, die du nicht verwendest.

Präzision reduzieren. 2-3 Dezimalstellen sind normalerweise genug.

Gruppen abflachen. Unnötige Verschachtelung dient keinem Zweck.

IDs aufräumen. Behalte referenzierte, entferne automatisch generierten Müll.

Pfade zusammenführen. Mehrere Pfade, die ein Pfad sein könnten, sollten kombiniert werden.

Versteckte Elemente entfernen. Ebenen, die du im Design-Tool versteckt, aber nicht gelöscht hast.

Wann Dateigröße behalten

Manchmal ist größer korrekt:

Animationen. IDs und Gruppen dienen oft als Animations-Ziele. Entferne sie nicht blind.

CSS-Styling. Wenn du SVG mit externem CSS stylst, brauchst du diese IDs und Klassen.

Zukünftige Bearbeitung. Ultra-optimiertes SVG ist schwer zu bearbeiten. Behalte die Quelldatei, optimiere die Produktionsversion.

Vergleich

Einfaches Icon, vor Optimierung:

Original: 24KB
Nach Metadaten-Entfernung: 8KB
Nach Präzisions-Reduktion: 4KB
Nach Struktur-Bereinigung: 2KB

Das ist 12x kleiner. Lädt schneller. Parst schneller. Bei jedem Seitenladen, bei jedem Nutzer.

Inline vs. Extern

Kleine SVGs (unter 1KB optimiert) funktionieren oft am besten inline direkt in HTML. Keine zusätzliche HTTP-Anfrage.

Größere SVGs oder wiederverwendete Icons funktionieren besser als externe Dateien, die gecacht werden können.

Der Break-Even-Punkt hängt von deiner Situation ab. Allgemein: wenn du ein SVG einmal verwendest und es winzig ist, inline es. Wenn du es wiederholt verwendest oder es komplex ist, externe Datei.

---

SVG-Optimierung ist kostenlose Performance. Lass deine Icons durch einen Optimizer laufen, bevor du versendest. Dauert Sekunden, spart Bytes bei jedem Seitenladen, für immer.