SVG, PNG, JPG oder WebP: das passende Format für die Übergabe
Das richtige Bildformat für Website-Icons, transparente Illustrationen und soziale Medien wählen und Größe, Hintergrund und Exportqualität gezielt prüfen.
Zuerst den Einsatzort klären
Ein Website-Icon, eine transparente Produktillustration und ein Social-Media-Beitrag können auf derselben SVG-Datei beruhen und trotzdem unterschiedliche Ausgabedateien brauchen. Entscheidend sind das Zielsystem, die Darstellungsgröße und der Hintergrund. Behalte eine bearbeitbare Originaldatei, bevor du Exporte anlegst. Eine kleinere Datei hilft nur, wenn das Bild weiterhin richtig aussieht.
Auf einer selbst verwalteten Website eignet sich SVG häufig für einfache Icons. Ein Marktplatz verlangt für eine transparente Illustration möglicherweise PNG. Ein soziales Netzwerk akzeptiert vielleicht JPG, aber kein SVG. Prüfe deshalb vor dem Export die Upload-Vorgaben.
Das Übergabeformat auswählen
| Format | Geeignet für | Vor der Übergabe prüfen |
|---|---|---|
| SVG | Bearbeitbare Logos, Oberflächen-Icons und Vektorillustrationen | Das Ziel akzeptiert SVG; eingebettete Bilder und Schriften funktionieren weiterhin |
| PNG | Scharfe Rastergrafiken mit transparentem Hintergrund | Die Pixelmaße passen zur Darstellung und die Dateigröße zum Upload-Limit |
| JPG | Undurchsichtige Bilder und fotografische Kompositionen | Transparenz wird nicht benötigt; die Kompression erhält wichtige Konturen |
| WebP | Bilder fürs Web, sofern das Zielsystem WebP akzeptiert | Transparenz, Bildqualität und Kompatibilität bleiben über den gesamten Ablauf erhalten |
PNG komprimiert verlustfrei. JPG komprimiert verlustbehaftet und hat keinen Alphakanal. WebP unterstützt Transparenz sowie verlustbehaftete und verlustfreie Kodierung. Am Formatnamen allein erkennst du jedoch nicht, wie ein bestimmtes Exportprogramm die Datei kodiert hat. Vergleiche die heruntergeladenen Dateien in ihrer vorgesehenen Darstellungsgröße.
Vektorgröße und Pixelmaße unterscheiden
Eine aus Pfaden aufgebaute SVG-Zeichnung lässt sich skalieren, ohne ein festes Pixelraster zu vergrößern. Ein PNG enthält dagegen eine bestimmte Anzahl von Pixeln. Für eine Illustration mit 240 × 160 CSS-Pixeln braucht ein 1×-Rasterexport 240 × 160 Pixel; ein 2×-Export enthält 480 × 320 Pixel und wird bei derselben CSS-Größe angezeigt. Doppelte Breite und Höhe bedeuten viermal so viele Pixel und meistens eine größere Datei.
Bereite die gewünschten Maße vor der Konvertierung in der SVG-Datei vor. Ein Download ist nicht automatisch ein 2×-Export. Diese Konverter verwenden die SVG-Abmessungen und begrenzen die längste Kante auf 4096 Pixel. Halte die Proportionen zum viewBox stimmig, damit die Komposition erhalten bleibt.
Die Endung .svg beweist nicht, dass der gesamte Inhalt aus Vektoren besteht. Über ein image-Element kann ein SVG auch ein Rasterbild enthalten. Eine größere SVG-Hülle stellt keine Details wieder her, die in diesem eingebetteten Bild fehlen.
Vektoren beschreiben Geometrie; Rasterexporte brauchen genügend Pixel für ihre spätere Darstellungsgröße.
Transparenz beim Export erhalten
Öffne die heruntergeladene Datei vor einem hellen und einem dunklen Hintergrund. Eine weiße Vorschau beweist keinen undurchsichtigen Hintergrund; umgekehrt kann ein Schachbrettmuster selbst Teil des Bildes sein. Prüfe, ob der wechselnde Hintergrund durch leere Bereiche sichtbar bleibt und feine Konturen sauber aussehen.
Nutze SVG zu PNG, wenn transparente Flächen und scharfe Kanten besonders wichtig sind. Probiere SVG zu WebP, wenn das Zielsystem dieses Format annimmt, und prüfe das Ergebnis dort. JPG kann keine Transparenz speichern: Der SVG-zu-JPG-Konverter dieser Website legt transparente Bereiche auf Weiß.
Prüfe leere Flächen und Randpixel auf kontrastierenden Hintergründen, bevor du ein transparentes Bild weitergibst.
Drei typische Übergaben
Website-Icon: Beginne mit SVG, wenn die Website es unterstützt. Prüfe das Icon bei seiner tatsächlichen Größe von beispielsweise 24 Pixeln. Auch eine skalierbare Datei kann zu viele Details oder bei kleinen Größen ungleichmäßige Konturen haben. Erstelle bei Bedarf zusätzlich ein PNG für das Zielsystem.
Transparente Produktillustration: Exportiere PNG mit den geforderten Pixelmaßen. Platziere es auf dem tatsächlichen Hintergrund der Produktseite, gegebenenfalls auch im Dunkelmodus. Beurteile Schatten, helle Akzente und halbtransparente Ränder, nicht nur die Bildmitte.
Social-Media-Upload: Richte dich nach den aktuellen Format- und Größenvorgaben der Plattform. Bereite bei einem undurchsichtigen Bild den gewünschten Hintergrund vor dem Hochladen vor. Kontrolliere auch die veröffentlichte Vorschau: Der Dienst kann das lokal korrekte Bild zuschneiden oder erneut komprimieren.
Andere Formate haben besondere Aufgaben
Nutze SVG zu GIF, wenn ein Ziel ausdrücklich GIF verlangt. Dieses Werkzeug erzeugt ein statisches Bild, keine Animation. Die begrenzte Farbpalette kann Verläufe und weiche Kanten verändern.
Der BMP-Export erzeugt ein 24-Bit-Bild und legt transparente Stellen auf Weiß. Der TIFF-Export schreibt RGBA-Pixel; er bietet keine CMYK-Konvertierung und garantiert keine Druckreife. ICO ist für Icons gedacht, doch dieser Konverter schreibt eine ausgewählte Größe pro Datei und kein Paket mehrerer Auflösungen. Maßgeblich bleibt die Spezifikation der empfangenden Anwendung.
Häufige Fragen zum Export
Warum wirkt das Ergebnis unscharf?
Vergleiche die Pixelmaße mit der Darstellungsgröße und der Pixeldichte des Geräts. Prüfe außerdem eingebettete Rasterbilder im SVG. Exportiere die Originaldatei erneut in passender Größe; ein kleines PNG größer zu ziehen ergänzt keine Bilddetails.
Woher kommt ein heller Saum?
Betrachte die Kante auf dunklem Hintergrund. Weiße Pixel können bereits im Motiv enthalten sein, oder ein früherer Export hat halbtransparente Ränder auf Weiß reduziert. Eine solche JPG-Datei in PNG umzuwandeln stellt die verlorene Transparenz nicht wieder her.
Warum verschiebt sich Text oder wird abgeschnitten?
Stelle sicher, dass beim Rendern die benötigte Schrift verfügbar ist. Für eine unveränderliche Ausgabegrafik kannst du Text in einem geeigneten Vektoreditor in Pfade umwandeln; behalte daneben das Original mit bearbeitbarem Text. Prüfe den viewBox um Buchstaben, Konturen und Schatten. Mehr Pixel allein reparieren keine beschnittene Komposition.
Das Original behalten und die Ausgabedatei vorbereiten
Speichere das ursprüngliche SVG getrennt von jeder Ausgabedatei. Nutze bei Bedarf den SVG-Kompressor und vergleiche das Ergebnis, bevor du etwas ersetzt. Benenne Exporte nach Größe und Einsatzzweck. Der Leitfaden zum SVG-Workflow erklärt die Prüfung eines Entwurfs bis zur fertigen Übergabe.