SVG oder PNG fürs Logo: Vektor oder Pixel – und wo welches Format passt

Kurz gesagt: Halten Sie Ihr Logo als SVG bereit, wo immer es angenommen wird – auf der Website, in der Gestaltung und für die Druckvorbereitung –, denn ein Vektor bleibt in jeder Grösse scharf und ist meist winzig. Legen Sie ein PNG mit transparentem Hintergrund daneben für alles, was nur Pixel annimmt: E-Mail-Signaturen, viele Upload-Formulare, Office-Dokumente, die Sie anderen schicken. JPG hat keine Transparenz und eignet sich schlecht für Logos; WebP funktioniert im Web, aber nicht überall sonst.

Dieser Vergleich erklärt den Unterschied zwischen Vektor und Pixel, stellt die beiden Formate Punkt für Punkt gegenüber, zeigt, wo welches angenommen wird, erläutert, was Sie über Skripte in SVG-Dateien wissen sollten, und endet mit der Umwandlung in beide Richtungen – samt den Grenzen, ein PNG wieder in einen Vektor zu verwandeln.

Vektor oder Pixel: was SVG und PNG speichern

Eine SVG-Datei enthält Zeichenanweisungen: Formen, Kurven, Farben und Text, geschrieben als XML. Das Gerät zeichnet sie in jeder benötigten Grösse neu, sodass ein Kreis im 16-Pixel-Icon wie auf dem Messebanner ein perfekter Kreis bleibt. Eine PNG-Datei enthält ein festes Raster aus Pixeln. In ihrer eigenen Grösse sieht sie perfekt aus; vergrössert werden Kanten weich oder treppig, weil das Detail zwischen den Pixeln nie gespeichert wurde. SVG ist ein offener W3C-Standard; PNG ist das klassische verlustfreie Pixelformat.

SVG oder PNG fürs Logo im Überblick

Bei einem typischen Logo – wenige flächige Farben, klare Formen, vielleicht ein Schriftzug – gewinnt SVG bei Skalierung, Dateigrösse und Bearbeitung. Die Datei bleibt klein, weil eine Kurve einmal beschrieben statt als Tausende Pixel gespeichert wird, und sie wächst nicht, wenn das Logo grösser erscheint. Ein PNG desselben Logos braucht für jede Grösse eine eigene Version: klein für den Seitenkopf, gross für hochauflösende Bildschirme, noch grösser für eine Präsentation.

Beide Formate beherrschen Transparenz, das Logo kann also auf jedem Hintergrund stehen. JPG kann das nicht: Es hat immer einen vollflächigen, meist weissen Hintergrund, der auf farbigen Flächen als Kasten sichtbar wird. WebP und AVIF unterstützen Transparenz und sind kleiner als PNG, werden ausserhalb des Browsers aber noch nicht überall angenommen. Das grössere Bild der Formate zeigt WebP, AVIF, JPEG oder PNG.

PNG ist dort die richtige Wahl, wo sich Details nicht als Formen zeichnen lassen: ein Logo mit Foto, weiche Verläufe mit Struktur, ein eingescanntes, von Hand gezeichnetes Zeichen. Solche Bilder in SVG umzuwandeln, ergibt grosse, schwerfällige Dateien ohne jeden Gewinn an Schärfe.

Wo SVG funktioniert und wo Sie weiterhin PNG brauchen

• Website und Onlineshop: SVG für das Logo in Kopf- und Fusszeile, dazu das Favicon-Set – wie es aufgebaut ist, erklärt Favicon erstellen.
• E-Mail-Signaturen: PNG. Viele E-Mail-Programme zeigen SVG-Bilder nicht an oder blockieren sie. Exportieren Sie in doppelter Anzeigegrösse, damit das Logo auf hochauflösenden Bildschirmen scharf bleibt.
• Upload-Formulare von Verzeichnissen, Marktplätzen, Veranstaltungsplattformen und Social-Media-Profilen: meist nur PNG oder JPG. Nehmen Sie das PNG mit Transparenz oder ein JPG auf Weiss, wo keine Transparenz gewünscht ist.
• Office-Dokumente und Präsentationen: Viele aktuelle Programme können SVG einfügen, ältere Versionen und die Software Ihrer Empfänger aber nicht unbedingt. Für Dateien, die Sie verschicken, ist PNG die sichere Wahl.
• Druck: Druckereien bevorzugen meist Vektordateien. Fragen Sie, welches Format sie brauchen; wollen sie Pixel, exportieren Sie in der verlangten Auflösung, statt ein kleines PNG zu vergrössern.
• Markenrichtlinien und Agenturen: Bewahren Sie die ursprüngliche Vektordatei als Master auf und leiten Sie jedes PNG davon ab – nie umgekehrt.

Ist SVG sicher? Skripte und versteckte Inhalte in SVG-Dateien

Weil SVG ein Textformat ist, das Browser interpretieren, kann es mehr enthalten als eine Zeichnung: Skripte, Event-Handler, eingebettetes HTML, Verweise auf externe Dateien und Editor-Daten wie Ebenennamen, Kommentare oder Metadaten des Erstellers. Direkt in eine Website eingebettet oder im Browser geöffnet, kann ein manipuliertes SVG aus unbekannter Quelle deshalb mehr anrichten, als ein PNG je könnte. Behandeln Sie erhaltene SVG-Dateien wie jede andere Datei, die Code ausführen kann, und bereinigen Sie sie vor der Veröffentlichung.

In SchweizerIMG entfernen SVG optimieren und SVG zu PNG, JPG, WebP oder AVIF zuerst Skripte und verknüpfte Dateien aus jedem SVG; Kommentare und Metadaten werden beim Absichern des SVG immer entfernt. Externe Schriften und Bilder werden nie geladen, Text wird mit den mitgelieferten Schriften gezeichnet – bei einem Logo, dessen Schriftzug eine besondere Schrift verwendet, sollten Sie den Text im Gestaltungsprogramm in Pfade umwandeln. All das geschieht in Ihrem Browser; die Dateien werden nicht hochgeladen (siehe Sicherheitsseite).

Umwandeln: SVG zu PNG, PNG zu SVG und optimieren

1. 1

   SVG zu PNG

   SVG zu PNG, JPG, WebP oder AVIF rendert SVG-Dateien in beliebiger Grösse – nach Skalierung (zum Beispiel 1, 2, 3), nach Breite oder Höhe in Pixeln oder nach Druckauflösung –, mehrere Grössen gleichzeitig, auf transparentem oder farbigem Hintergrund. Ein ganzer Satz Logodateien ist ein Durchgang.

2. 2

   SVG optimieren

   SVG optimieren verkleinert SVG-Dateien und prüft, ob das Ergebnis identisch aussieht. «Sicher» behält IDs, Klassen und Stile; «Aggressiv» zielt auf die kleinste Datei. Verwenden Sie es, bevor ein Logo auf die Website kommt.

3. 3

   PNG zu SVG (Vektorisieren)

   Bild zu SVG (Vektorisieren) verwandelt Logos, Symbole, Unterschriften und Strichzeichnungen in Vektoren, mit den Vorgaben «Logo (bis zu 8 flächige Farben)», «Strichzeichnung (schwarzweiss)» und «Detailliert (bis zu 32 Farben)». Welche Pläne es enthalten, sehen Sie auf der Preisseite.

Alle drei Werkzeuge gehören zu den Vektorwerkzeugen; welche Dateitypen sie öffnen, steht unter unterstützte Bildformate.

Was nehmen? Eine kurze Entscheidungshilfe

• Sie haben das Logo als SVG: Behalten Sie es als Master, verwenden Sie es im Web und exportieren Sie PNGs für E-Mail, Formulare und Dokumente.
• Sie haben nur ein PNG eines einfachen, flächigen Logos: Vektorisieren Sie es, prüfen Sie das Ergebnis gross und klein, und behalten Sie das PNG ebenfalls.
• Ihr Logo enthält ein Foto oder strukturierte Grafik: Bleiben Sie bei PNG (oder WebP im Web) in den benötigten Grössen.
• Sie wissen nicht, was das empfangende System annimmt: Schicken Sie ein transparentes PNG – das Format, das fast überall funktioniert.

Häufige Fragen

Ist SVG oder PNG besser fürs Logo?

Für das Logo selbst SVG: in jeder Grösse scharf, klein und bearbeitbar. Für Orte, die nur Pixel annehmen – E-Mail-Signaturen, viele Upload-Formulare, Dokumente zum Weitergeben –, ist ein aus dem SVG exportiertes PNG die bessere Wahl.

Wie gross sollte ein PNG-Logo sein?

Etwa doppelt so gross, wie es angezeigt wird, damit es auf hochauflösenden Bildschirmen scharf bleibt. Für eine E-Mail-Signatur mit 200 Pixeln Breite exportieren Sie rund 400 Pixel. Mehrere Skalierungen aus dem SVG in einem Durchgang decken verschiedene Verwendungen ab.

Kann ich ein JPG-Logo in ein SVG umwandeln?

Ja, wenn es ein einfaches, flächiges Logo ist: Bild zu SVG (Vektorisieren) rekonstruiert es als Formen. Kompressionsartefakte in einem kleinen JPG machen die Kanten rauer – verwenden Sie die grösste, sauberste Version, die Sie haben.

Warum sieht mein SVG-Logo nach dem Umwandeln anders aus?

Meist wegen Schriften oder verknüpfter Dateien: Externe Schriften und Bilder werden nicht geladen, Text wird mit den mitgelieferten Schriften gezeichnet. Wandeln Sie Text in Pfade um und betten Sie alles ins SVG ein, bevor Sie umwandeln.

Bereit, Ordnung in Ihre Logodateien zu bringen? Öffnen Sie die Vektorwerkzeuge, sehen Sie, wie Agenturen Kundenlogos vorbereiten, ohne sie hochzuladen, oder erstellen Sie ein kostenloses Konto.