--- title: "SVG vs. PNG: Welches Format solltest du verwenden?" description: "Ein Logo in drei Pixeldichten braucht als PNG drei Dateien, als SVG eine. Wie die Rechnung mit Größe und Auslieferung aussieht und wann der gemischte Fall sinnvoll ist." canonical: "https://freeaigeneration.com/de/ratgeber/svg-vs-png-welches-format-sollten-sie-verwenden/" robots: "noindex" lang: "de" --- # SVG vs. PNG: Welches Format solltest du verwenden? Ein Logo von 300 × 100 CSS-Pixeln umfasst bei einfacher Auflösung 30.000 Bildpunkte. Auf einem Display mit doppelter Pixeldichte sind es 120.000, bei dreifacher 270.000. Ein einziges SVG deckt alle drei Fälle ab, ohne dass du drei Dateien pflegen musst. Das ist der Kern der Entscheidung **SVG vs. PNG**, und mehr steckt zunächst nicht dahinter. Der Rest ist eine Frage des Zwecks. Wer ein Foto weitergibt, braucht PNG oder JPEG. Wer eine Grafik weiterbearbeiten will, braucht Vektordaten. Der [Vektor-Editor](/de/tools/vektor-editor/) kann beide Seiten bedienen, weil er nach SVG und nach PNG exportiert, jeweils über den Download des Browsers. ## Zwei grundverschiedene Speichermodelle Eine PNG-Datei ist ein Gitter aus Bildpunkten mit fester Breite und Höhe. Jeder Punkt trägt Farbwerte, bei Transparenz zusätzlich einen Alphawert. Das Gitter ist die Datei; vergrößerst du es, muss Software neue Punkte erfinden, und das ist sichtbar. Ein SVG speichert dagegen Koordinaten und Anweisungen. Beim Anzeigen rastert der Renderer die Grafik auf die Zielgröße herunter oder hoch, und zwar frisch. Deshalb ist ein SVG bei jeder Größe scharf, ohne dass die Datei selbst sich ändert. PNG ist dabei verlustfrei und unterstützt Transparenz. Das ist ein echter Vorteil gegenüber JPEG und der Grund, warum Screenshots, UI-Grafiken und Freisteller als PNG wandern. ## Wo die Rechnung kippt Vektorgrafik ist nicht automatisch klein. Eine Datei mit zehntausend komplexen Pfaden kann größer sein als ein gut komprimiertes PNG. Wenn jemand behauptet, SVG sei immer leichter, stimmt das nur für einfache Formen, Icons und Schriftzüge. Umgekehrt wächst ein Raster schnell. Ein Quadrat von 2.400 × 2.400 Pixeln mit Alphakanal sind 5,76 Megapixel, und als rohe Pixel sind das rund 23 Megabyte, bevor überhaupt komprimiert wird. Als PNG wird daraus deutlich weniger, aber die Auflösung bleibt für immer festgeschrieben. Der praktische Test ist unspektakulär. Öffne die Grafik in einem Fenster und zieh es auf das Doppelte. Bleibt alles scharf, hast du Vektordaten. Werden Kanten weich, ist es ein Raster. Und wenn nur ein Teil scharf bleibt, ist die Datei gemischt. ## Der gemischte Fall Ein SVG darf Bilder enthalten. Eingebettete Fotos bleiben Raster und werden beim Vergrößern pixelig, auch wenn der Rest der Datei aus Pfaden besteht. Das ist kein Fehler, sondern eine Eigenschaft des Formats, und es betrifft jede Grafik, die eine Fotografie in ein Vektorlayout einbettet. Für die Praxis heißt das: prüfe vor der Entscheidung, was tatsächlich in der Datei steckt. Ein Logo mit einem eingebetteten Produktfoto ist nur zur Hälfte Vektor, und ein SVG mit einem 4.000 Pixel breiten Hintergrundbild kann mehrere Megabyte groß sein. ## Was beim Ausliefern passiert SVG lässt sich im Transport komprimieren, mit gzip nach RFC 1952 oder Brotli nach RFC 7932, ohne dass sich die Darstellung ändert. Das ist Aufgabe des Servers und nicht des Editors, und es ist der Grund, warum SVG-Dateien im Netz oft kleiner ankommen, als sie auf der Platte sind. Ein PNG wird dagegen nicht neu gerendert. Was du einmal gespeichert hast, ist die Obergrenze der Detailtreue. Wer später eine Retina-Variante braucht, muss neu exportieren, und wer keine Ausgangsdaten mehr hat, kann nur noch interpolieren. ## Welche Wahl die richtige ist Nimm SVG für Logos, Icons, Diagramme, Karten, Linien und alles, was in mehreren Größen erscheinen soll oder später noch bearbeitet wird. Nimm PNG für Screenshots, Fotos mit Transparenz, Pixelgrafik und alles, was ohnehin als feste Bildfläche gedacht ist. Ein Sonderfall verdient Erwähnung. Eine Umwandlung von PNG nach SVG ist immer eine Nachzeichnung und niemals eine verlustfreie Umrechnung. Aus Pixeln lassen sich Pfade nur schätzen. Für ein einfarbiges Logo funktioniert das brauchbar, für ein Foto nicht. Wenn beide Formate im Spiel bleiben sollen, ist die Reihenfolge entscheidend. Arbeite in SVG, exportiere PNG daraus, wenn eine feste Bilddatei gebraucht wird, und behalte die SVG als Quelle. Der umgekehrte Weg führt regelmäßig zu Qualitätsverlust. Die Abgrenzung zu den anderen Vektorbehältern steht unter [SVG, AI oder EPS](/de/ratgeber/svg-vs-ai-vs-eps-welches-vektorformat-sollten-sie-verwenden/). Und wenn du dich für SVG entschieden hast, ist [SVG für das Web optimieren](/de/ratgeber/svg-dateien-fur-das-web-vorbereiten-und-optimieren/) der nächste sinnvolle Schritt.