SVG in PNG umwandeln: in jeder gewünschten Größe
·
SVG ist wunderbar für Logos, aber viele Stellen akzeptieren nur PNG oder JPG. Die Umwandlung ist einfach, sobald Sie die richtige Größe wählen, und es gibt ein paar Fallen, die Sie vermeiden sollten. Dieser Ratgeber erklärt den Unterschied, zeigt, wie Sie die Ausgabegröße wählen, und behandelt, was schiefgehen kann.
Warum ein SVG in PNG umwandeln
Soziale Netzwerke, E-Mail-Programme, Dokumenteditoren, Präsentationstools, App-Stores und viele Upload-Formulare akzeptieren kein SVG oder stellen es uneinheitlich dar. Ein PNG sieht überall gleich aus, deshalb liefern Designer meist beide Versionen.
SVG und PNG im Vergleich
| Eigenschaft | SVG | PNG |
|---|---|---|
| Typ | Vektor (Formen und Pfade) | Raster (Pixel) |
| Feste Größe | Nein, skaliert ohne Unschärfe | Ja |
| Am besten für | Logos, Icons, Illustrationen | Screenshots, Grafiken, exakte Ausgabe |
| Dateigröße | Winzig bei einfachen Grafiken | Wächst mit der Pixelgröße |
| Unterstützung | Browser und Design-Programme | Fast überall |
Vorteile von SVG
- In jeder Größe scharf und meist winzig.
- Per CSS gestaltbar.
Vorteile von PNG
- Fast überall akzeptiert und auf jedem Gerät identisch dargestellt.
- Leicht in Dokumente, E-Mails und Apps einzufügen.
Behalten Sie das SVG als Master und exportieren Sie PNGs, wenn Sie sie brauchen. Der Ratgeber SVG oder PNG geht ausführlicher darauf ein.
Die Ausgabegröße wählen
Ein SVG hat keine feste Auflösung, die Pixelgröße des PNG legen also Sie fest. Zu klein, und es wirkt beim Vergrößern unscharf, zu groß, und die Datei wird schwer.
| Verwendung | Empfohlene Größe |
|---|---|
| Website-Logo | Etwa das Doppelte der Anzeigebreite, z. B. 400 px für ein 200-px-Logo |
| Folie oder Dokument | 1000–2000 px breit |
| Druck | Etwa 300 Pixel pro Zoll in der gedruckten Größe |
Eine Skalierungsoption multipliziert die ursprüngliche Größe des SVG: 2x verdoppelt die Pixel, 4x vervierfacht sie.
Schritt für Schritt: SVG in PNG umwandeln
- 1Legen Sie die Größe fest anhand der Tabelle oben.
- 2Öffnen Sie SVG in PNG und fügen Sie Ihre SVG-Dateien hinzu.
- 3Wählen Sie die Skalierung, etwa 2x für scharfe Bildschirme.
- 4Umwandeln und herunterladen. Transparente Bereiche bleiben im PNG transparent.
- 5Prüfen Sie das Ergebnis auf fehlende Schriften oder Bilder und komprimieren Sie es bei Bedarf mit Bild komprimieren.
- 6Brauchen Sie eine Icon-Datei? Nutzen Sie PNG in ICO oder den Favicon-Generator.
Schriften, externe Bilder und andere Überraschungen
Wenn ein SVG eine nicht eingebettete Schrift verwendet oder auf ein externes Bild verweist, kann das Bild nach der Umwandlung anders aussehen, weil Browser externe Ressourcen blockieren, wenn ein SVG als eigenständiges Bild dargestellt wird. Um auf Nummer sicher zu gehen, wandeln Sie Text vor dem Export in Ihrem Design-Programm in Pfade um oder betten Schriften und Bilder in das SVG ein.
Wählen Sie PNG, um den transparenten Hintergrund zu behalten. Wandeln Sie stattdessen in JPG um, wird der transparente Bereich mit einer einfarbigen Fläche gefüllt, denn JPG kann nicht durchsichtig sein.
Häufige Fehler
- Zu klein exportieren, das PNG dann vergrößern und Unschärfe erhalten.
- Schriften vergessen, sodass der Text in einer Ersatzschrift erscheint.
- JPG für ein Logo wählen, was die Transparenz verliert und Kanten unscharf macht.
- Das SVG nach der Umwandlung löschen. Behalten Sie es als Master.
Häufig gestellte Fragen
Geht bei der Umwandlung von SVG in PNG Qualität verloren?
Das PNG ist ein Bild fester Größe, das in seiner eigenen Größe scharf sein kann, beim Vergrößern aber unscharf wird. Wählen Sie bei der Umwandlung eine ausreichend große Größe und behalten Sie das SVG als Master.
Wie behalte ich den transparenten Hintergrund?
Wandeln Sie in PNG um, das Transparenz unterstützt. Ein JPG würde transparente Bereiche mit einer einfarbigen Fläche füllen.
In welcher Größe sollte ich ein Logo als PNG exportieren?
Etwa in der doppelten Breite, in der es angezeigt wird, damit es auf scharfen Bildschirmen gut aussieht, zum Beispiel 400 Pixel für ein Logo, das mit 200 Pixeln angezeigt wird. Für Dokumente sind 1000 bis 2000 Pixel üblich.
Warum sieht mein Text im PNG anders aus?
Die Schrift ist möglicherweise nicht im SVG eingebettet. Wandeln Sie den Text vor der Umwandlung in Pfade um oder betten Sie die Schrift ein.
Was, wenn mein SVG keine Breite und Höhe hat?
Wenn die Datei weder eine Größe noch eine viewBox angibt, wird vor der Skalierung eine Standardgröße verwendet. Ergänzen Sie die Abmessungen in Ihrem Design-Programm, damit das Ergebnis vorhersehbar ist.