# SVG oder PNG: Vektor oder Pixel für Logos und Grafiken [Canonical HTML page](https://gradiently.design/de/guide/svg-vs-png) Ein SVG ist eine Reihe von Zeichenanweisungen. Ein PNG ist ein festes Raster aus Punkten. Dieser eine Unterschied entscheidet, welche Datei auf deine Website, deine Verpackung und dein Instagram gehört. ## The short version - SVG ist ein Vektorformat, das Formen mathematisch beschreibt, deshalb bleibt es in jeder Größe perfekt scharf. - PNG ist ein Rasterformat aus einem festen Pixelraster, deshalb wird es weich oder klotzig, wenn man es über seine Größe hinaus vergrößert. - Nutze SVG für Logos, Icons, einfache Illustrationen und Interface-Grafiken auf Websites und im Druck. - Nutze PNG für Fotos, Texturen, komplexe Grafiken und alles, was du auf Social-Media-Plattformen hochlädst, denn die akzeptieren kein SVG. - Ein gutes Logo-Kit enthält beides: einen SVG-Master und PNG-Exporte in den Größen, die jeder Ort braucht. **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. ```html ``` Ein komplettes Logozeichen in ein paar hundert Bytes. Die `viewBox` legt das Koordinatensystem der Zeichnung fest; in welcher Größe es erscheint, bestimmt die Seite. 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](https://developer.mozilla.org/en-US/docs/Web/SVG) behandelt das Format vollständig. ## SVG und PNG im direkten Vergleich | Eigenschaft | SVG | PNG | | --- | --- | --- | | Typ | Vektor: Formen und Pfade | Raster: ein Pixelraster | | Skalierung | In jeder Größe scharf | In eigener Größe scharf, vergrößert weich | | Transparenz | Ja | Ja, voller Alphakanal | | Fotos und Textur | Schlecht: Dateien werden riesig oder unmöglich | Hervorragend | | Per Code bearbeitbar | Ja: Farben, Animation, CSS | Nein | | Upload in Social Media | Nicht akzeptiert | Überall akzeptiert | | Typische Größe, einfaches Logo | 1 bis 10 KB | 10 bis 100 KB pro Größe | ## 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. | Wo das Logo hinkommt | Datei | Größe | | --- | --- | --- | | Website-Header und Footer | SVG | Skaliert passend | | Favicon | SVG plus PNG-Fallbacks | ICO mit 32×32, PNGs mit 180×180, 192×192 und 512×512 | | Profilbild auf Instagram, LinkedIn oder X | PNG | 1080×1080 quadratisch, Zeichen im mittleren Kreis halten | | E-Mail-Signatur | PNG | Bis 600×200, in doppelter Anzeigegröße exportiert | | Druckerei, Schilderbau, Merchandise | SVG oder PDF | Vektor, beliebige Größe | Ein SVG-Master, eine Handvoll PNG-Exporte. [Logogrößen](https://gradiently.design/de/guide/logo-sizes) und [Logovarianten](https://gradiently.design/de/guide/logo-variations) gehen weiter. Ein quadratisches Profilbild mit einer schlichten Wortmarke mittig auf einem Verlaufshintergrund Profilbilder sind immer PNG oder JPG. Exportiere das Logo groß, mit 1080×1080, damit es auf hochauflösenden Bildschirmen scharf bleibt. ## 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. Eine quadratische Grafik mit der Aufschrift Vektor, stellvertretend für flache Formen, die zu SVG passen Flache Formen, saubere Kanten, wenige Farben: ideales SVG-Terrain. Eine quadratische Grafik mit der Aufschrift Pixel auf einem texturierten Verlauf, stellvertretend für Grafiken, die zu PNG passen Körnung, weiches Licht und Materialtextur gehören in ein PNG. ## 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](https://gradiently.design/de/guide/webp-images) auf deinen eigenen Seiten meist die bessere Wahl als PNG. ### Vermeiden - Ein PNG-Logo, gestreckt auf einen breiten Header - Ein Foto, in ein riesiges SVG nachgezeichnet - Fremde SVG-Dateien hochladen, ohne sie zu bereinigen - Icons als PNGs, die 1x-, 2x- und 3x-Kopien brauchen ### Machen - SVG-Logo mit in CSS festgelegter Breite - Fotos als WebP oder JPG in ihrer Anzeigegröße - Von Nutzern hochgeladenes SVG wie Code behandeln, denn es kann Skripte enthalten - SVG-Icons mit `fill: currentColor` > **SVG kann Code enthalten** Weil SVG Markup ist, kann eine Datei aus unbekannter Quelle Skripte enthalten. Erlaube SVG-Uploads auf deiner Website nur bereinigt, oder wandle sie beim Hochladen in PNG um. ## So wandelst du SVG in PNG um 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. **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. **Lass die Transparenz an** Lass den Hintergrund leer, damit das PNG einen Alphakanal hat. Wie du das prüfst, steht unter [transparenter Hintergrund](https://gradiently.design/de/guide/transparent-background). 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](https://gradiently.design/de/guide/export-svg-transparent-png) zeigt, wie, und [PNG oder JPG](https://gradiently.design/de/guide/png-vs-jpeg) klärt die andere häufige Wahl. ## FAQ ### Ist SVG für ein Logo besser als PNG? Für die Masterdatei ja: Ein SVG-Logo bleibt in jeder Größe scharf und lässt sich umfärben. Exportiere PNG-Kopien für Social Media und E-Mail, die kein SVG annehmen. ### Kann ich ein SVG auf Instagram hochladen? Nein. Instagram und andere Social-Media-Plattformen nehmen PNG, JPG und Video an. Exportiere ein PNG in der Größe der Plattform, etwa 1080×1080 für einen quadratischen Post. ### Ist SVG kleiner als PNG? Bei einfachen Formen wie Logos und Icons ist ein SVG meist viel kleiner. Bei Fotos und texturierten Bildern ist ein PNG oder JPG kleiner und genauer. ### Unterstützt SVG Transparenz? Ja. Alles, was in einem SVG nicht gezeichnet ist, ist transparent, deshalb sitzt es sauber auf jedem Hintergrund. ### Kann ich ein PNG-Logo in SVG umwandeln? Nur durch Nachzeichnen oder Neuzeichnen. Automatisches Nachzeichnen funktioniert bei kräftigen, flachen Logos; detaillierte oder texturierte Logos müssen von Hand als Vektor neu gezeichnet werden.