Tiny SVG Optimierungseinstellungen meistern

Das Optimierungseinstellungspanel von Tiny SVG gibt Ihnen vollständige Kontrolle darüber, wie Ihre SVG-Dateien optimiert werden. In diesem umfassenden Leitfaden werden wir jede Einstellung und Funktion erkunden, um Ihnen zu helfen, das Beste aus Ihrem SVG-Optimierungs-Workflow herauszuholen.

Das Einstellungspanel verstehen#

Das Einstellungspanel ist in drei Hauptbereiche unterteilt:

1. Globale Einstellungen - Steuerung des gesamten Optimierungsverhaltens
2. Funktionen - Umschalten von 45+ einzelnen SVGO-Plugins
3. Exportoptionen - Konfiguration von PNG/JPEG-Exportdimensionen

Lassen Sie uns jeden Bereich im Detail betrachten.

Globale Einstellungen#

Original anzeigen#

Zweck: Original- und optimierte SVG nebeneinander anzeigen

Wann verwenden:

• Vergleich visueller Unterschiede vor/nach der Optimierung
• Überprüfung, dass die Optimierung Ihr SVG nicht beschädigt
• Qualitätssicherung während der Stapelverarbeitung

// Wenn aktiviert, sehen Sie:
// Original: 12.5 KB | Optimiert: 4.2 KB (-66.4%)

Tipp: Das Panel wechselt automatisch zur "optimiert"-Registerkarte, wenn die Komprimierung abgeschlossen ist, aber Sie können diese Einstellung umschalten, um beide Ansichten sichtbar zu halten.

Gzip-komprimiert vergleichen#

Zweck: Zeigt gzip-komprimierte Größen statt roher Dateigrößen an

Warum wichtig: Webserver liefern Dateien normalerweise mit gzip-Komprimierung, so dass Sie ein genaueres Bild der tatsächlichen Dateigrößen erhalten.

// Ohne gzip:
Original: 12.5 KB → Optimiert: 4.2 KB
 
// Mit gzip aktiviert:
Original: 3.8 KB → Optimiert: 1.9 KB

Best Practice: Überprüfen Sie immer gzip-komprimierte Größen für Produktionsbereitstellungen, da sie die tatsächlichen Transfergrößen über HTTP besser darstellen.

Markup verschönern#

Zweck: Formatiert den optimierten SVG-Code mit ordentlicher Einrückung

Abwägung:

• ✅ Aktiviert: Besser lesbar, einfacher zu debuggen (+5-10% Dateigröße)
• ❌ Deaktiviert: Minimiert, kleinere Dateigröße, schwerer zu lesen

<!-- Verschönert -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path d="M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z"/>
</svg>
 
<!-- Minimiert -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z"/></svg>

Empfehlung: Für Entwicklung/Debugging aktivieren, für Produktions-Builds deaktivieren.

Mehrfachdurchlauf#

Zweck: Führt den Optimierungsprozess mehrmals aus, bis keine weiteren Verbesserungen möglich sind

Funktionsweise: Einige Optimierungen können andere Optimierungen ermöglichen. Zum Beispiel kann das Entfernen leerer Gruppen Elterngruppen zusammenklappbar machen.

// Einzelner Durchlauf: 12.5 KB → 5.1 KB (-59.2%)
// Mehrfachdurchlauf: 12.5 KB → 4.2 KB (-66.4%)

Leistungshinweis: Mehrfachdurchlauf kann für komplexe SVGs 2-3x länger dauern, aber die Dateigröße-Einsparungen sind es normalerweise wert.

Best Practice: Aktiviert lassen, es sei denn, Sie optimieren Hunderte von Dateien und benötigen schnellere Verarbeitung.

Zahlenpräzision#

Zweck: Steuert die Dezimalpräzision für numerische Werte (0-10)

Standard: 2

Beispiele:

<!-- Präzision: 0 -->
<circle cx="12" cy="12" r="5"/>
 
<!-- Präzision: 2 (Standard) -->
<circle cx="12.35" cy="12.47" r="5.18"/>
 
<!-- Präzision: 5 -->
<circle cx="12.34567" cy="12.47234" r="5.18392"/>

Abwägungen:

• Niedrigere Präzision (0-1): Kleinere Dateien, potenzielle visuelle Unterschiede bei komplexen Pfaden
• Mittlere Präzision (2-3): Ausgewogen, geeignet für die meisten Icons und Illustrationen
• Höhere Präzision (4-10): Größere Dateien, bewahrt komplizierte Details

Empfehlung: 2 für Icons, 3-4 für detaillierte Illustrationen, 5+ für technische Diagramme verwenden.

Transformationspräzision#

Zweck: Steuert die Dezimalpräzision für Transformationsoperationen (drehen, skalieren, verschieben)

Standard: 4

Warum getrennt von Zahlenpräzision?: Transformationen sind empfindlicher gegenüber Rundungsfehlern. Ein kleiner Fehler bei einem Rotationswinkel kann sichtbare Verzerrungen verursachen.

<!-- Transformationspräzision: 2 -->
<g transform="translate(12.35, 8.47) rotate(45.12)">
 
<!-- Transformationspräzision: 4 (Standard) -->
<g transform="translate(12.3456, 8.4712) rotate(45.1234)">

Empfehlung: Bei 4 belassen, es sei denn, Sie haben sehr einfache Transformationen (dann 2 verwenden) oder benötigen Sub-Pixel-Genauigkeit (5-6 verwenden).

Funktionsschalter (SVGO-Plugins)#

Tiny SVG bietet Zugriff auf 45+ SVGO-Plugins. Hier sind die wichtigsten:

Wesentliche Plugins (normalerweise aktiviert)#

removeDoctype

Entfernt <!DOCTYPE>-Deklarationen, die Browser für Inline-SVGs nicht benötigen.

<!-- Vorher -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "...">
<svg>...</svg>
 
<!-- Nachher -->
<svg>...</svg>

Einsparung: ~100-200 Bytes

removeComments

Entfernt alle XML-Kommentare.

<!-- Vorher -->
<!-- Created with Figma -->
<!-- Icon: Home -->
<svg>...</svg>
 
<!-- Nachher -->
<svg>...</svg>

Wann deaktivieren: Wenn Sie Zuordnungskommentare oder bedingte Kommentare beibehalten müssen.

removeMetadata

Entfernt <metadata>-Tags, die Editor-Informationen enthalten.

<!-- Vorher -->
<svg>
  <metadata>
    <rdf:RDF>...</rdf:RDF>
  </metadata>
  <path d="..."/>
</svg>
 
<!-- Nachher -->
<svg>
  <path d="..."/>
</svg>

Einsparung: Kann Kilobytes aus Adobe Illustrator-exportierten Dateien entfernen.

Exportoptionen#

Skalierungsvoreinstellungen#

Tiny SVG bietet praktische Skalierungsvoreinstellungen für PNG/JPEG-Export:

• 0.25x - Miniaturansicht/Vorschaubilder
• 0.5x - Niedrigauflösende Displays
• 1x - Originalgröße
• 2x - Retina-Displays (am häufigsten)
• 3x - Hochauflösende Android-Geräte
• 4x-8x - Druckqualität oder ultra-hochauflösende Displays

Beispiel-Workflow:

// Original-SVG: 24×24
// 2x Export: 48×48 PNG (für Retina-Displays)
// 3x Export: 72×72 PNG (für hochauflösende Android-Geräte)

PNG vs JPEG#

PNG-Export:

• Verlustfreie Komprimierung
• Unterstützt Transparenz
• Am besten für: Icons, Logos, Illustrationen mit Transparenz
• Typische Größe: Größer als JPEG

JPEG-Export:

• Verlustbehaftete Komprimierung (95% Qualität Standard)
• Keine Transparenz (weißer Hintergrund)
• Am besten für: Komplexe Illustrationen ohne Transparenz
• Typische Größe: 40-60% kleiner als PNG

// Gleicher 512×512-Export:
PNG: 87 KB
JPEG: 34 KB (-61%)

Fazit#

Das Optimierungseinstellungspanel von Tiny SVG gibt Ihnen granulare Kontrolle über jeden Aspekt der SVG-Optimierung. Durch das Verständnis jeder Einstellung und jedes Plugins können Sie:

• Dateigröße optimieren ohne Qualitätsverlust
• Zugänglichkeit beibehalten durch Erhaltung semantischer Elemente
• Bearbeitbarkeit bewahren für Design-Iterationen
• In jeder Größe exportieren für verschiedene Geräte und Anwendungsfälle

Beginnen Sie mit den empfohlenen Standardeinstellungen und passen Sie dann basierend auf Ihren spezifischen Anforderungen an. Die besten Einstellungen sind diejenigen, die Dateigröße, visuelle Qualität und Ihre Workflow-Anforderungen ausbalancieren.

Viel Erfolg beim Optimieren!