SVG vs. PNG für Logos: welches Format wann verwenden
Halten Sie den Master eines Logos als SVG und nutzen Sie ihn überall, wo das Format unterstützt wird — es bleibt in jeder Größe scharf und wiegt fast nichts. Greifen Sie zu PNG nur, wenn Sie ein festgrößiges Rasterbild oder einen Ort brauchen, der kein SVG akzeptiert, etwa die meisten Social-Media-Profile. Für den Druck übergeben Sie ein Vektor-PDF oder EPS. Verwenden Sie niemals JPG für ein Logo.
Auf dieser Seite
Was ist der Unterschied zwischen SVG und PNG?
Der Unterschied ist Vektor vs. Raster. Ein SVG (Scalable Vector Graphics) beschreibt ein Logo als Formen — Punkte, Kurven und Füllungen — definiert durch Mathematik. Es wird in jeder Größe, in der es erscheint, neu gezeichnet, bleibt also überall scharf. Als Code ist es für die klare Geometrie der meisten Logos zudem winzig, oft nur ein paar Kilobyte.
Ein PNG (Portable Network Graphics) ist ein Rasterbild: ein festes Pixelraster mit fester Breite und Höhe. Es unterstützt Transparenz, sodass ein Logo sauber auf jeder Farbe sitzt — aber größer als exportiert gezeigt, strecken sich die Pixel und die Kanten weichen auf.
Wann sollten Sie SVG verwenden?
Machen Sie SVG zu Ihrer Master-Datei und zum Standard für alles auf dem Bildschirm:
- Websites und Web-Apps — das Logo im Header, Footer und Hero. Moderne Browser rendern SVG auf jedem Bildschirm perfekt scharf, auch Retina und 4K.
- Überall, wo das Logo skalieren muss — responsive Layouts und hochauflösende Displays.
- Als einzige Quelle, aus der Sie alles andere exportieren.
- Favicons, da moderne Browser ein SVG-Favicon akzeptieren.
Wann sollten Sie PNG verwenden?
Nutzen Sie PNG, wenn Sie ein festgrößiges Raster oder einen Ort brauchen, der kein SVG annimmt:
- Social-Profilbilder und Titelbilder — die meisten Plattformen akzeptieren nur Raster-Uploads, exportieren Sie also ein quadratisches PNG in der jeweils empfohlenen Größe.
- Manche E-Mail-Programme und Signatur-Tools, die SVG nicht zuverlässig rendern.
- Dokumente, Präsentationen und Marktplätze, die nur Rasterbilder annehmen.
- Schnelle Vorschauen und Thumbnails.
SVG vs. PNG auf einen Blick
| Worauf es ankommt | SVG (Vektor) | PNG (Raster) |
|---|---|---|
| Skalierung | scharf in jeder Größe | feste Größe; unscharf beim Vergrößern |
| Dateigröße (Logos) | winzig für einfache Zeichen | wächst mit den Abmessungen |
| Transparenz | ja | ja |
| Bearbeitbarkeit | Formen und Farben bleiben editierbar | flachgerechnete Pixel |
| Am besten für | Web, Master-Datei, Skalierung | Avatare, festgrößiges Raster, Uploads |
| Kompatibilität | moderne Browser und Design-Tools | fast überall akzeptiert |
Was ist mit EPS, PDF, AI — und JPG?
SVG und PNG decken das Web ab, aber ein komplettes Logo-Paket umfasst meist noch ein paar weitere:
- PDF — ein Vektorformat, das fast jede Druckerei und jedes Bürowerkzeug akzeptiert. Das ist die sicherste Datei für eine Druckerei.
- EPS — ein älteres Vektorformat, das manche Druckereien noch anfordern. Behandeln Sie es als Druck-Kompatibilitätsexport, nicht als etwas für den Alltag.
- AI (Adobe Illustrator) — eine Arbeits-/Quelldatei. Wenn ein Designer Ihr Logo gemacht hat, archivieren Sie die AI (oder das SVG) als editierbares Original.
- JPG — meiden Sie es für Logos. JPG hat keine Transparenz, erzwingt also einen Hintergrundkasten um das Zeichen, und seine Kompression ist verlustbehaftet, was scharfe Kanten verschmiert. Es ist für Fotos gebaut, nicht für Logos.
Behalten Sie das SVG als Ihre einzige Quelle der Wahrheit. Jedes PNG, Favicon, PDF und Social-Bild sollte daraus exportiert werden — nie umgekehrt. Ein PNG zurück in einen Vektor zu tracen trifft das Original selten.
Kann man ein PNG zurück in ein SVG umwandeln?
Nicht sauber. Ein PNG in SVG umzuwandeln bedeutet, die Pixel in Formen zu tracen, was das Original selten trifft und oft unsaubere Pfade erzeugt. Wenn Sie das SVG haben, starten Sie immer dort. Wenn Sie nur ein niedrig aufgelöstes PNG haben, ist es meist besser, das Zeichen als Vektor neu aufzubauen, als es automatisch zu tracen.
Was ist mit Favicons und App-Symbolen?
Ein Favicon ist nur eine sehr kleine Version Ihres Logos, exportieren Sie es also aus dem SVG: ein SVG-Favicon für moderne Browser plus kleine PNGs (zum Beispiel 32×32 und ein 180×180 Apple-Touch-Icon) für breite Kompatibilität. Dieselbe Regel gilt für App-Symbole — erzeugen Sie die von jeder Plattform verlangten Größen aus dem Vektor-Master. Siehe wie man aus seinem Logo ein Favicon macht.
Die kurze Antwort
Gestalten und speichern Sie Ihr Logo als SVG, nutzen Sie es im Web, exportieren Sie PNG für festgrößige Raster-Platzierungen, geben Sie Druckereien ein PDF oder EPS und lassen Sie JPG ganz weg. Behalten Sie den Vektor-Master, und Sie können jede Größe oder jedes Format später ohne Qualitätsverlust erzeugen.
Erstellen Sie ein Logo und exportieren Sie SVG, PNG und FaviconHäufige Fragen
Ist SVG besser als PNG für Logos?
Für ein Logo meist ja: SVG ist ein Vektor, bleibt also in jeder Größe scharf und ist bei einfachen Zeichen winzig. PNG ist weiterhin nützlich für festgrößige Raster-Platzierungen wie Social-Avatare und Tools, die kein SVG lesen können.
Verliert ein SVG-Logo an Qualität beim Skalieren?
Nein. SVG beschreibt Formen mit Mathematik, also rendert es in jeder Größe scharf neu — vom Favicon bis zum Plakat — ohne je unscharf oder verpixelt zu werden.
Warum sieht mein PNG-Logo unscharf aus?
Ein PNG hat eine feste Pixelgröße. Es größer als exportiert oder auf einem hochauflösenden Bildschirm zu zeigen, streckt diese Pixel und weicht die Kanten auf. Exportieren Sie ein größeres PNG oder nutzen Sie das SVG.
Sollte ich JPG für ein Logo verwenden?
Nein. JPG hat keine Transparenz (fügt also einen Hintergrundkasten hinzu) und ist verlustbehaftet, was die scharfen Kanten eines Zeichens verschmiert. Nutzen Sie SVG oder PNG für Logos, niemals JPG.
Welches Format gebe ich einer Druckerei?
Eine Vektordatei — meist ein PDF oder EPS, exportiert aus Ihrem Logo — damit die Druckerei es sauber auf jede Größe skalieren kann. Behalten Sie das SVG als Master, aus dem Sie diese erzeugen.
Quellen
- Scalable Vector Graphics (SVG) 2 — W3C
- Image file type and format guide — MDN Web Docs