Exportiert ein SVG als JPG für Stellen, die keine Vektordateien annehmen, etwa manche CMS, E-Mail-Newsletter oder Druckereien. JPG kennt keine Transparenz, transparente Flächen werden weiß oder in einer Wunschfarbe gefüllt, und ein Qualitätsregler wägt Dateigröße gegen Kompressionsartefakte an scharfen Kanten ab.
Anleitung
- Ein SVG öffnen, auf die Vorschau ziehen oder den Code einfügen. Zum Start ist ein Beispiel geladen.
- Optimieren: Anzahl der Nachkommastellen und die Bereinigungen wählen. Größe vorher und nachher wird angezeigt; Code, Data-URI oder CSS-Zeile kopieren oder die Datei laden.
- Zu PNG: Breite oder Höhe eingeben (oder 2×, 4×, 1024… antippen), PNG, JPG oder WebP und einen Hintergrund wählen, dann herunterladen.
- Vektorisieren: Ein PNG oder JPG ablegen, Farbanzahl und Detailstufe wählen und das SVG laden.
- Code: Das Markup bearbeiten und zusehen, wie sich die Vorschau beim Tippen aktualisiert.
- Der Optimierer ändert nie Breite, Höhe oder viewBox des SVG, behält verwendete IDs und rundet Pfaddaten ohne Abweichung. Komplexe Dateien vor dem Ersetzen des Originals in der Vorschau prüfen.
- Zwei Nachkommastellen reichen für die meisten Icons; für große technische Zeichnungen 3–4 nehmen.
- Vektorisieren klappt am besten mit Logos, Icons und flächigen Grafiken. Fotos werden zu vielen großen Flächen; mit weniger Farben entsteht ein Poster-Look.
- Dateien werden im Browser verarbeitet. Skripte in SVGs werden hier nie ausgeführt: Vorschauen werden als Bilder angezeigt.
Warum SVG-Dateien groß werden
Designprogramme exportieren weit mehr als die Zeichnung: Editor-Metadaten, Kommentare, ungenutzte IDs und Definitionen, leere Gruppen, Attribute mit Standardwerten und Koordinaten mit sechs oder mehr Nachkommastellen. Bei einem typischen Icon kann dieser Ballast den Großteil der Datei ausmachen. Der Optimierer entfernt ihn, rundet Pfaddaten auf die gewählte Genauigkeit und fasst überflüssige Gruppen zusammen, ohne je Breite, Höhe oder viewBox des Wurzelelements anzutasten; referenzierte IDs bleiben erhalten.
Zwei Nachkommastellen reichen für die meisten Icons und Logos in Bildschirmgröße, große technische Zeichnungen brauchen eventuell drei oder vier. Vor dem Ersetzen des Originals immer die Vorschau vergleichen, besonders bei Masken, Filtern oder eingebetteten Schriften.
Vektor oder Pixelbild
SVG beschreibt Formen, bleibt in jeder Größe scharf und ist für Icons, Logos und Diagramme meist winzig; Fotos sind als JPG, PNG oder WebP besser aufgehoben. Verlangt eine Plattform ein Pixelbild, etwa ein App-Store-Icon, ein PNG-Favicon oder ein Social-Media-Bild, exportiere in der exakten Pixelgröße: Ein viewBox von 24 × 24 bei 1024 px wird scharf, weil der Vektor neu gezeichnet und nicht gestreckt wird. JPG kennt keine Transparenz, also eine Hintergrundfarbe wählen.
Vektorisieren und Data-URIs
Vektorisieren klappt am besten bei flachen Grafiken mit wenigen Farben und klaren Kanten, etwa Logos, Icons, Unterschriften und Strichzeichnungen; ein Foto zerfällt in viele große Flächen. Für kleine Icons in CSS ist eine URL-kodierte Data-URI meist kürzer als Base64, denn SVG ist Text und Base64 kostet rund 33 % mehr.
Häufige Fragen
Verändert das Optimieren das Aussehen meines SVG?
Eigentlich nicht. Der Optimierer behält viewBox und referenzierte IDs und rundet Koordinaten auf die eingestellte Genauigkeit. Verschiebt sich bei einer komplexen Datei etwas, die Nachkommastellen erhöhen und in der Vorschau erneut vergleichen.
Wie wandle ich SVG in hochauflösendes PNG um?
SVG öffnen, zu Als PNG wechseln und Breite oder Höhe setzen oder 2×, 4× bzw. eine Größe wie 1024 antippen. Das Bild wird in dieser Größe aus dem Vektor neu gezeichnet, bis 8192 px, und bleibt scharf.
Lässt sich ein PNG oder JPG in echtes Vektor-SVG umwandeln?
Ja, durch Vektorisieren: Das Tool sucht Bereiche ähnlicher Farbe und macht daraus Pfade. Logos und Icons mit wenigen Farben gelingen gut, Fotos ergeben große Dateien mit Posterisierungs-Look.
Data-URI in Base64 oder URL-kodiert?
Für SVG ist URL-kodiert meist kleiner und bleibt lesbar, weil Base64 den Text um etwa ein Drittel vergrößert. Base64 braucht man nur, wenn ein Tool es verlangt.
Kann ich hier gefahrlos ein SVG unbekannter Herkunft öffnen?
Ja. SVGs können Skripte enthalten, die Vorschau wird hier aber als Bild angezeigt, und Browser führen in Bildern keine Skripte aus. Hochgeladen wird nichts.
Bleibt beim Konvertieren die Transparenz erhalten?
PNG und WebP behalten transparente Bereiche, sofern du keine Hintergrundfarbe wählst. JPG kann keine Transparenz speichern, solche Bereiche werden weiß oder mit der gewählten Farbe gefüllt.