Ein PNG-Logo ist eine Fotografie des Logos — ein festes Pixelraster. Ein SVG-Logo sind die Anweisungen, um das Logo zu zeichnen: "ziehe eine Linie von hier bis dort, fülle mit dieser Farbe, runde diese Kante ab". Der Browser oder die Software berechnet diese Zeichnungen in Echtzeit für jede Auflösung neu. Deshalb ist SVG immer scharf — unabhängig von der Größe.
Direkter Vergleich
| Merkmal | SVG | PNG |
|---|---|---|
| Formattyp | Vektoriell (XML-Anweisungen) | Rasterisiert (Pixel) |
| Verlustfreie Skalierung | ✅ Unendlich | ❌ Verpixelt beim Vergrößern |
| Transparenz | ✅ Vollständig | ✅ Vollständiger Alphakanal |
| Ideal für Fotos | ❌ Nein | ❌ Nein (nutze JPG/WebP) |
| Ideal für einfache Logos | ✅ Beste Option | ✅ Funktioniert, aber fest |
| Bearbeitbar via CSS/JavaScript | ✅ Farben, Animationen, Interaktionen | ❌ Nein |
| Dateigröße (einfaches Logo) | Sehr klein (1–10 KB) | Größer (20–200 KB) |
| Akzeptiert in sozialen Medien | ❌ Nein (die meisten akzeptieren kein SVG) | ✅ Universal |
| Akzeptiert in E-Mail | ❌ Nein | ✅ Ja |
| Akzeptiert in Druckereien | ✅ Ja (und bevorzugt) | ✅ In hoher Auflösung |
| Von Google indexiert | ✅ Lesbarer Text | ❌ Nur via Alt-Text |
Warum SVG für Logos auf Websites überlegen ist
Ein PNG-Logo mit 200px Breite wirkt auf einem Full-HD-Monitor scharf, erscheint aber auf einem 4K-Monitor oder einem Retina-Display eines iPhones unscharf — weil der Bildschirm versucht, das Bild mit mehr Pixeln darzustellen, als es hat. Um Retina-Displays mit PNG abzudecken, muss das Logo mit 2× oder 4× der Anzeigegröße exportiert werden, was das Dateigewicht erhöht.
SVG löst dieses Problem vollständig: Der Browser rendert das SVG in der exakten Auflösung des Bildschirms, immer perfekt, ohne Versionen in verschiedenen Größen zu benötigen. Ein 5-KB-SVG eines einfachen Logos erscheint scharf auf einem 460-PPI-Smartphone, einem 4K-Monitor und einer 10-Meter-Werbetafel.
Zudem kann SVG via CSS und JavaScript manipuliert werden: die Logofarbe für den Dark-Mode ändern, Animationen beim Hover erstellen, Logoelemente je nach Kontext ändern — alles mit einer einzigen CSS-Zeile.
Wann PNG noch nötig ist
SVG wird nicht in jedem Kontext akzeptiert. PNG bleibt unverzichtbar für:
- Soziale Medien: Instagram, Facebook, LinkedIn, WhatsApp und die meisten Plattformen verlangen JPG oder PNG für Profilfotos und Uploads.
- E-Mail-Marketing: E-Mail-Clients rendern kein SVG inline. Logos in E-Mails müssen PNG sein.
- Präsentationen und Dokumente: PowerPoint, Word und Google Slides akzeptieren PNG, haben aber möglicherweise eingeschränkte oder inkonsistente SVG-Unterstützung.
- Sticker und Apps: Formate wie WhatsApp-Sticker verlangen speziell PNG.
- Komplexe Logos mit Verläufen und Schatten: fotografische Effekte in einem Logo (was nicht empfohlen wird, aber vorkommt) werden in SVG nicht gut dargestellt.
Der richtige Ablauf für professionelle Logos
Der Industriestandard ist, das Logo in beiden Formaten zu haben:
- SVG: für Website, Webanwendungen, Versand an Druckereien und jede Nutzung, die Skalierbarkeit erfordert
- PNG mit transparentem Hintergrund (hohe Auflösung): für soziale Medien, E-Mail, Dokumente und jeden Kontext, in dem SVG nicht akzeptiert wird
Der Logo-Ersteller von ImageTools exportiert beide Formate gleichzeitig. Wenn du das Logo bereits als PNG hast und das SVG erstellen musst, kann ein Designer aus dem PNG vektorisieren — der umgekehrte Prozess (SVG zu PNG) ist einfach und kann mit dem Bild-Konverter erledigt werden.
Erstelle jetzt dein Logo in SVG und PNG
Der Logo-Ersteller von ImageTools exportiert beide Formate — ohne Anmeldung, ohne Wasserzeichen.
Logo kostenlos erstellen