SVG-Workflow
SVG-Dateien in 5 Schritten anzeigen, optimieren und exportieren
Die Arbeit mit SVGs umfasst mehrere unterschiedliche Aufgaben: den Rohcode inspizieren, Ballast von Design-Tools entfernen, in Rasterformate exportieren, Vorschaubilder vorbereiten und für das Web einbetten. Dieser Workflow deckt alles in der richtigen Reihenfolge ab.
SVG-Quellcode inspizieren
Bevor du ein SVG modifizierst, musst du seine Struktur verstehen — welche Elemente vorhanden sind, ob IDs oder Klassen verwendet werden, und welche Metadaten das Export-Tool eingefügt hat.
Optimieren und Dateigröße reduzieren
SVGs, die aus Illustrator oder Figma exportiert wurden, enthalten unnötige Metadaten, Editor-Kommentare und redundante Attribute, die die Dateigröße verdoppeln können.
Als Rasterbild exportieren
Einige Kontexte erfordern PNG oder JPEG — E-Mail-Clients, bestimmte CMS und Social-Media-Plattformen rendern SVG nicht zuverlässig.
Für Präsentationen oder Dokumente verschönern
Einfache Screenshots von SVGs auf weißen Hintergründen sehen unfertig aus. Das Hinzufügen von Hintergrund, Abstand und Schatten macht sie präsentationsfertig.
Für Inline-Einbettung in Base64 kodieren
Das Einbetten von SVGs als Base64-Daten-URIs in CSS oder HTML eliminiert einen HTTP-Request, was für kleine Icons in leistungskritischen Kontexten nützlich ist.
Profi-Tipps
- Inspiziere zuerst immer den SVG-Quellcode — Optimierungstools können manchmal SVGs mit ungewöhnlicher Struktur oder Animationen brechen.
- Exportiere bei der Konvertierung von SVG in PNG mit 2x oder 3x Auflösung, um es auf hochauflösenden Displays scharf zu halten.
- Base64-Kodierung erhöht die Dateigröße um etwa 33%, also verwende sie nur für kleine Icons, bei denen das Eliminieren des HTTP-Requests den Trade-off wert ist.