SVG oder PNG: Vektor oder Pixel für Logos und Grafiken

SVG oder PNG heißt eigentlich Vektor gegen Pixel. Eine SVG-Datei speichert Formen als Anweisungen (zeichne hier einen Kreis, füll ihn mit dieser Farbe), deshalb zeichnet ein Browser oder Drucker sie in jeder Größe gestochen scharf neu, vom 16 Pixel großen Favicon bis zum Ladenschild. Ein PNG speichert ein festes Raster farbiger Pixel, es sieht also in seiner eigenen Größe perfekt aus und wird weich, wenn du es vergrößerst. Nutze SVG für Logos, Icons und einfache Grafiken im Web und im Druck. Nutze PNG für Fotos, texturierte Grafiken und alles, was du in Social Media hochlädst.

Was eine SVG-Datei eigentlich ist

SVG steht für Scalable Vector Graphics und ist reiner Text. Öffne eine Datei im Code-Editor und du siehst lesbares Markup, keinen Zeichensalat. Deshalb sind SVGs bei einfachen Formen winzig, deshalb kannst du ihre Farbe per CSS ändern, und deshalb können Suchmaschinen und Screenreader den Text darin lesen.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Studio Nine">
  <defs>
    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#4f46e5"/>
      <stop offset="1" stop-color="#db2777"/>
    </linearGradient>
  </defs>
  <circle cx="32" cy="32" r="28" fill="url(#g)"/>
  <path d="M22 40 L32 20 L42 40 Z" fill="#ffffff"/>
</svg>

Ein PNG desselben Zeichens braucht für jede Größe, in der es scharf sein soll, eine eigene Datei, und keine davon lässt sich ohne neuen Export umfärben. Die MDN-Dokumentation zu SVG behandelt das Format vollständig.

SVG und PNG im direkten Vergleich

SVG oder PNG für ein Logo

Bewahre das Master-Logo als SVG auf. Es ist die einzige Datei, die jede künftige Nutzung abdeckt: Website-Header, ein 4 Meter breites Banner, Stickerei, Briefkopf, Favicon. Exportiere daraus PNGs für die Orte, die keine Vektoren annehmen, meist Social-Media-Plattformen, E-Mail-Signaturen und manche Präsentationsprogramme.

Wann PNG die richtige Wahl ist

Vektor funktioniert nur, wenn sich das Bild als Formen beschreiben lässt. Sobald ein Bild fotografische Details, weiches Licht, Körnung oder Tausende feiner Farbwechsel hat, ist ein PNG kleiner und genauer. Wer ein Foto in ein SVG nachzeichnet, bekommt eine Datei, die schwerer und schlechter ist.

• Fotos und Fotocollagen.
• Texturierte Grafiken: Körnung, Papier, Pinselstriche, Filmeffekte.
• Social Posts, Stories und Karussells, denn Plattformen nehmen nur Pixel an.
• Screenshots und alles, was vom Bildschirm aufgenommen wird.
• Reiche Hintergründe mit geschichtetem Licht und Rauschen.

SVG oder PNG für eine Website

Auf einer Website nutzt du Inline-SVG oder eine SVG-Datei für Logos, Icons und Illustrationen und moderne Formate für Fotos. SVG-Icons skalieren mit dem Text, können currentColor übernehmen und so deinem Theme folgen und brauchen keine eigenen Dateien für hochauflösende Bildschirme. Für Rasterbilder ist WebP auf deinen eigenen Seiten meist die bessere Wahl als PNG.

So wandelst du SVG in PNG um

1. 1

   Leg die größte nötige Größe fest

   Ein Profilbild mit 1080×1080 oder eine E-Mail-Signatur mit 1200×400 (das Doppelte der Anzeigegröße 600×200). Exportiere einmal in dieser Größe, statt später zu vergrößern.

2. 2

   Exportiere aus der Quelle

   Exportiere in Figma, Illustrator oder Inkscape den Rahmen als PNG in der gewählten Größe. Der Export aus dem Vektor hält jede Kante scharf.

3. 3

   Lass die Transparenz an

   Lass den Hintergrund leer, damit das PNG einen Alphakanal hat. Wie du das prüfst, steht unter transparenter Hintergrund.

4. 4

   Prüfe bei 100 %

   Sieh dir dünne Linien und kleine Schrift in Originalgröße an. Zerfallen sie, vereinfache das Logo für kleine Einsätze, statt eine matschige Datei auszuliefern.

Der umgekehrte Weg, PNG zu SVG, ist keine Umwandlung, sondern ein Neuzeichnen. Automatisches Nachzeichnen funktioniert bei einem kräftigen, flachen Logo und scheitert bei allem mit Textur oder weichen Kanten. Existiert dein Logo nur als PNG, lass es einmal als Vektor neu zeichnen; jede spätere Datei wird davon besser.

Die Pro-Exporte von Gradiently decken beide Seiten ab: Ein Design kann aus derselben Datei als SVG für Web und Druck oder als transparentes PNG für Plattformen rausgehen. SVG und transparentes PNG exportieren zeigt, wie, und PNG oder JPG klärt die andere häufige Wahl.