PNG vs SVG: Was ist der Unterschied und welches sollten Sie verwenden?

PNG und SVG können beide scharfe, transparente Grafiken erzeugen, aber sie speichern Bilder auf völlig unterschiedliche Weise.

PNG ist ein Rasterbildformat aus Pixeln. SVG ist ein vektorbasiertes Format, das Grafiken mithilfe von Formen, Pfaden und anderen strukturierten Informationen beschreibt.

Dieser Unterschied wirkt sich auf fast alles andere aus: Bildqualität bei Größenänderung, Dateigröße, Bearbeitung, Webleistung und welche Art von Grafik jedes Format am besten verarbeitet.

Wenn Sie nur die kurze Antwort benötigen:

• Verwenden Sie PNG für Screenshots, detaillierte pixelbasierte Grafiken und Bilder, die Transparenz erfordern, aber keine unbegrenzte Skalierung.
• Verwenden Sie SVG für Logos, Symbole, Illustrationen, Strichzeichnungen und Grafiken, die in vielen verschiedenen Größen scharf bleiben müssen.

PNG vs SVG auf einen Blick

Was ist eine PNG-Datei?

PNG steht für Portable Network Graphics.

Ein PNG speichert ein Bild als ein Raster aus Pixeln. Jedes Pixel liefert Informationen über das Aussehen des Bildes.

Das Format verwendet eine verlustfreie Komprimierung, was bedeutet, dass PNG-Bilddaten ohne den Informationsverlust komprimiert und rekonstruiert werden können, der mit verlustbehafteten Formaten verbunden ist. PNG unterstützt auch Transparenz durch Alpha-Informationen.

Dies macht PNG besonders nützlich für:

• Screenshots
• Schnittstellenerfassungen
• transparente Produktbilder
• Grafiken mit Details auf Pixelebene
• In Rasterbearbeitungssoftware erstellte Grafiken
• Grafiken, bei denen das genaue Erscheinungsbild der Pixel erhalten bleiben muss

Die Einschränkung besteht darin, dass die Anzahl der Pixel festgelegt ist.

Wenn ein 500 × 500 Pixel großes PNG weit über seine ursprünglichen Abmessungen hinaus vergrößert wird, muss die Software diese Pixel vergrößern oder schätzen. Schließlich können Kanten weich, verschwommen oder verpixelt erscheinen.

Was ist eine SVG-Datei?

SVG steht für Scalable Vector Graphics.

Anstatt jedes einzelne Pixel zu beschreiben, kann SVG grafische Elemente wie Pfade, Formen, Linien und Text mithilfe strukturierter XML-basierter Markups beschreiben.

Die W3C-Spezifikation definiert SVG als eine Sprache für zweidimensionale Vektor- und gemischte Vektor-/Rastergrafiken und stellt ausdrücklich fest, dass SVG-Inhalte auf unterschiedliche Anzeigeauflösungen skaliert werden können.

Beispielsweise benötigt ein einfacher Kreis nicht Tausende einzelner Pixel in der Datei. Ein SVG kann Informationen definieren, die den Kreis selbst beschreiben.

Der Browser oder das Grafikprogramm rendert diese Form dann in der erforderlichen Größe.

Aus diesem Grund können richtig erstellte SVG-Vektorgrafiken scharf bleiben, unabhängig davon, ob sie als kleines Symbol angezeigt oder drastisch vergrößert werden.

SVG ist im Allgemeinen nützlich für:

• Logos
• Symbole
• Strichzeichnungen
• Illustrationen
• Diagramme und Grafiken
• Schnittstellengrafiken
• Dateien zum Schneiden (z. B. Plotter)
• Skalierbare Website-Grafiken

Der größte Unterschied: PNG ist rasterbasiert, SVG ist vektorbasiert

Dies ist der wichtigste Teil des Vergleichs zwischen PNG und SVG.

Ein Rasterbild beantwortet die Frage: Welche Farbe soll jedes Pixel haben?

Eine Vektorgrafik beantwortet eher Folgendes: Welche Formen, Pfade, Füllungen und Striche sollen gezeichnet werden?

Da ein PNG ein festes Pixelraster enthält, hängt seine nutzbare Auflösung von den Abmessungen dieses Rasters ab.

Ein echtes Vektor-SVG kann in einer anderen Größe gerendert werden, ohne die ursprünglichen Pixel einfach zu dehnen.

Aus diesem Grund ist SVG normalerweise vorzuziehen, wenn dasselbe Logo mit 24 Pixeln in einem Website-Header, mit 300 Pixeln in einer Präsentation oder auf einem großen Schild erscheinen kann. Sie benötigen nicht für jede Ausgabegröße eine separate Vektordatei.

Hat SVG eine bessere Qualität als PNG?

Nicht automatisch.

Die bessere Frage ist: Welche Art von Bild speichern Sie?

Bei einem einfachen Logo aus sauberen Formen liefert SVG in der Regel ein viel flexibleres Ergebnis, da diese Formen skalierbar bleiben.

Bei einem Foto mit Millionen feiner Farbänderungen, Texturen und Beleuchtungsvariationen kann die Konvertierung aller Elemente in Vektorpfade zu einem unnötig komplizierten SVG führen.

Daher ist SVG nicht von Natur aus qualitativ hochwertiger als PNG. Es eignet sich besser für Grafiken, die effizient als Vektoren dargestellt werden können.

Verbessert das Konvertieren von PNG in SVG die Bildqualität?

Hier werden viele Erklärungen zu PNG vs SVG irreführend.

Das Ändern einer Datei von .png in .svg stellt nicht auf magische Weise Details wieder her, die im Original-PNG fehlten.

1. Das PNG ist in ein SVG eingebettet

Eine SVG-Datei kann Rastergrafiken enthalten, da SVG gemischte Vektor-/Rastergrafiken unterstützt. In dieser Situation lautet die Dateierweiterung SVG, aber Ihr Bildmaterial basiert möglicherweise im Grunde immer noch auf Pixeln.

2. Das PNG wird automatisch nachverfolgt

Ein Vektorisierungstool kann die Pixel analysieren und Vektorpfade erstellen, die sich ihren Grenzen annähern. Dies funktioniert sehr gut für Logos, Symbole und flache Farbgrafiken. Grafiken mit geringer Auflösung und Schatten können zu übermäßigen Ankerpunkten und unordentlichen Pfaden führen.

3. Das Kunstwerk wird als saubere Vektoren rekonstruiert

Bei einfachen Grafiken erzielen Sie das beste Ergebnis, wenn Sie die wichtigen Formen nachbilden. Das Ziel einer guten Vektorisierung ist nicht unbedingt die Erstellung der höchstmöglichen Anzahl von Pfaden, sondern die Erzeugung sauberer Pfade, die das Originalbild genau darstellen.

Wenn Sie ein Rasterlogo oder eine Rastergrafik in skalierbares Bildmaterial verwandeln müssen, verwenden Sie einen geeigneten PNG-zu-SVG-Konverter, der die Vektorisierung durchführt, anstatt nur den Dateicontainer zu ändern.

PNG vs. SVG Dateigröße

Oft liest man die Aussage: SVG-Dateien sind kleiner als PNG-Dateien.

Manchmal sind sie es. Manchmal sind sie es nicht.

Für ein einfaches Symbol mit wenigen Pfaden kann ein SVG extrem kompakt sein. Die Darstellung derselben Grafik als großes PNG erfordert möglicherweise Tausende von Pixeln.

Aber stellen Sie sich ein sehr detailliertes Foto vor. Der Versuch, jede Textur, jede Hervorhebung und jeden Farbübergang mit Tausenden von Vektorformen zu reproduzieren, könnte das SVG viel komplizierter machen.

Eine bessere Regel ist: SVG ist in der Regel effizient für strukturell einfache Grafiken. PNG ist oft praktischer für komplexe pixelbasierte Bilder.

PNG vs SVG für Transparenz

Beide Formate können transparente Bereiche unterstützen.

PNG bietet ausgefeilte pixelbasierte Transparenz durch Alpha-Informationen. Damit eignet es sich hervorragend für Produktausschnitte, Schatten und Rasterillustrationen mit weichen, transparenten Kanten.

SVG kann auch transparente Formen und Elemente erstellen. Für Logos und Symbole kombiniert SVG Transparenz mit skalierbarer Vektorgeometrie.

Transparenz allein sollte Ihre Wahl also nicht bestimmen. Fragen Sie sich, welche Art von Grafik hinter dieser Transparenz steckt.

Was ist besser: PNG oder SVG?

Keines der beiden Formate ist allgemein besser.

Wählen Sie SVG, wenn die Struktur des Bildes wichtiger ist als die einzelnen Pixel.

Wählen Sie PNG, wenn das Erscheinungsbild auf Pixelebene wichtiger ist als skalierbare Geometrie.

Wählen Sie PNG, wenn:

• Sie speichern einen Screenshot
• Sie arbeiten mit Rastergrafiken
• Sie benötigen eine Bearbeitung auf Pixelebene
• Sie benötigen Transparenz in einem detaillierten Rasterbild
• Ihre Ausgabe hat eine bekannte feste Größe

Wählen Sie SVG, wenn:

• Sie speichern ein Logo
• Sie erstellen ein Symbol
• Sie benötigen unbegrenzte Vektorskalierung
• Das Kunstwerk besteht hauptsächlich aus Formen und Pfaden
• Entwickler müssen die Grafik möglicherweise stylen
• Die Datei wird zum Schneiden oder für andere pfadbasierte Workflows verwendet

PNG zu SVG: Wann sollten Sie konvertieren?

Die Konvertierung von PNG in SVG ist am sinnvollsten, wenn das Original-PNG etwas darstellt, das wahrscheinlich von vornherein vektorähnlich war.

Gute Kandidaten sind Logos, Symbole, Unterschriften, Silhouetten und Grafiken mit flachen Farben.

Schlechte Kandidaten sind Fotografien, stark strukturierte Gemälde und Grafiken mit komplizierten Schatten und Farbverläufen.

Endgültiges Urteil: SVG für skalierbare Grafiken, PNG für pixelbasierte Bilder

Der Hauptunterschied zwischen PNG und SVG besteht nicht einfach in der Dateigröße oder der Bildqualität. Es geht darum, wie das Bild dargestellt wird.

PNG speichert Rasterbildinformationen mithilfe von Pixeln. SVG bietet strukturierte, skalierbare Grafiken und kann sowohl Vektoren als auch gemischte Vektor-/Rasterinhalte enthalten.

Verwenden Sie PNG, wenn die Pixel das Bild sind. Verwenden Sie SVG, wenn die Formen das Bild sind.

Und wenn die einzige Datei, die Sie haben, ein PNG-Logo ist, das eigentlich eine Vektorgrafik sein sollte, kann die Konvertierung mit einem echten Vektorisierungsprozess Ihnen ein viel flexibleres SVG liefern.

Häufig gestellte Fragen