#F5F5F5

FOTOGRAFIE

Vergleich der Dateiformate PNG und SVG.

Bei der Arbeit mit hochwertigen digitalen Logos und Grafiken stellst du dir vielleicht die Frage, ob PNG oder SVG das bessere Speicherformat ist. Beides sind vielseitige Formate, die hohe Auflösungen auch für große Bilder unterstützen. Erfahre, worin sich PNG- und SVG-Dateien unterscheiden und wie du sie verwendest.

Creative Cloud entdecken

PNG vs SVG marquee image

https://main--cc--adobecom.hlx.page/cc-shared/fragments/seo-articles/get-started-notification-blade

Was ist eine PNG-Datei?

Dateien im Format PNG (Portable Network Graphics) sind rasterbasiert. Sie bieten eine hohe Auflösung und unterstützen verlustfreie Komprimierung, Transparenz und bis zu 16 Millionen Farben. Damit sind sie eine hervorragende Wahl für Grafiken, Logos, Diagramme und Illustrationen sowie detailreiche Fotos. Aufgrund ihrer Größe sind PNG-Dateien für Fotos im Web jedoch ungeeignet.

Weitere Infos zu PNG-Dateien

Was ist eine SVG-Datei?

Das SVG-Format (Scalable Vector Graphics) eignet sich gut für Logos und Grafiken, da diese flexibel vergrößert und verkleinert werden können. Sie sind auch eine gängige Wahl im Webdesign, weil Suchmaschinen wie Google ihre Programmiersprache XML lesen können. Das ist von Vorteil für die Suchmaschinenoptimierung und das Ranking von Websites.

Anders als PNG sind SVG-Dateien vektorbasiert. Vektordateien verwenden mathematische Algorithmen für die Bilddarstellung, sodass die Bilder ohne Qualitätsverlust auf jede Größe skaliert werden können.

Weitere Infos zu SVG-Dateien

Was ist der Unterschied zwischen PNG und SVG?

PNG- und SVG-Dateien haben Gemeinsamkeiten, unterscheiden sich aber auch in vielerlei Hinsicht.

Raster vs. Vektor.

Der größte Unterschied zwischen PNG und SVG besteht darin, dass PNG ein Raster- und SVG ein Vektorformat ist.

Das Rasterformat PNG basiert auf Pixeln. Wenn du ein Rasterbild zu stark vergrößerst, erscheint es körnig und verpixelt. Wird das Bild zu stark verkleinert, wirkt es verschwommen. PNG-Dateien können Bilder in sehr hohen Auflösungen darstellen, sind aber nicht unbegrenzt skalierbar.

Dagegen basieren SVG-Bilder als Vektordateien auf einem komplexen mathematischen System aus Linien, Punkten, Formen und Algorithmen. Sie können ohne Qualitätsverlust auf eine beliebige Größe skaliert werden.

Weitere Infos zu Raster- und Vektordateien

Dateigröße.

PNG-Dateien sind aufgrund der hohen Bildauflösungen, die sie unterstützen, oft sehr groß. Das Verarbeiten, Weitergeben, Speichern und Öffnen kann daher länger dauern. PNG-Dateien können auch die Ladezeiten einer Web-Seite verlangsamen. Deshalb ist JPEG das beliebtere Format für Fotos im Web. Es gibt zwar eine kleinere PNG-Variante mit 8-Bit, aber sie unterstützt nur 256 Farben.

SVG-Dateien sind wesentlich kleiner als PNG-Dateien und werden sich kaum negativ auf die Geschwindigkeit deines Computers oder deiner Website auswirken. (Designs mit einem hohen Detailgrad können jedoch selbst eine SVG-Datei verlangsamen.) Als vektorbasiertes Format können SVG-Dateien beliebig vergrößert oder verkleinert werden, ohne dass ihre Qualität darunter leidet.

Komprimierung.

SVG-Dateien werden verlustfrei komprimiert. Das bedeutet, dass bei der Komprimierung Definition, Details oder Qualität des Bildes nicht beeinträchtigt werden.

Auch PNG-Dateien werden verlustfrei um 5 bis 20 % komprimiert. Trotzdem sind sie tendenziell größer als SVG-Dateien.

Fotografie.

Wie bereits erwähnt, sind PNG-Dateien kein übliches Format für Bilder im Web. Sie können jedoch sehr detailreiche, hochwertige digitale Fotos für Print, Bildbearbeitung und andere Zwecke speichern. In Adobe Photoshop sind sie ein gängiges Dateiformat.

SVG-Dateien dagegen verwenden keine Pixel. Für die Darstellung von Fotos in hoher Qualität sind sie also weniger geeignet.

Verwendung im Web.

Sowohl PNG- als auch SVG-Dateien können Web-Grafiken, Illustrationen, Logos, Infografiken und Tabellen mit einem hohen Detailgrad wiedergeben.

SVG bietet jedoch einen wichtigen Vorteil: Jede SVG-Datei wird mit der textbasierten Programmiersprache XML anstatt mit Code geschrieben. Bildschirm-Leseprogramme und Suchmaschinen können die Dateien lesen und analysieren. Das macht SVG ideal für barrierefreie Inhalte und Suchmaschinenoptimierung.

SVG-Dateien sind normalerweise kleiner und lassen sich deshalb im Web schneller laden. Die Ladezeiten einer Website sind ein wichtiger Faktor beim Suchmaschinen-Ranking.

Auch PNG unterstützt textbasierte Grafiken – aber nicht im selben Umfang wie SVG.

Kompatibilität und Komplexität.

SVG gilt im Vergleich zu PNG als das umfassendere Dateiformat, ist jedoch nicht mit allen Browsern und Betriebssystemen kompatibel. Hinzu kommt, dass die Programmiersprache und vektorbasierte Struktur von SVG-Dateien abschreckend auf neue Anwenderinnen und Anwender wirkt.

PNG hingegen ist ein standardmäßiges Online-Format, das von Webbrowsern und Betriebssystemen generell besser unterstützt wird.

Animation.

PNG-Dateien unterstützen keine Animation – anders als GIF, ein ähnliches rasterbasiertes Bildformat.

SVG-Dateien unterstützen Animation, aber nicht so unkompliziert wie andere Dateiformate, z. B. AI, das native Format von Adobe Illustrator.

Weitere Infos zu AI-Dateien

Transparenz.

PNG- und SVG-Dateien unterstützen Transparenz und sind deshalb beide eine hervorragende Wahl für Logos und Grafiken im Web.

PNG gilt als eines der besten Formate für rasterbasierte, transparente Dateien. Wenn du mit Pixeln und Transparenz arbeitest, solltest du also lieber PNG statt SVG verwenden.

Wie konvertiere ich ein Rasterbild in SVG?

So konvertierst du eine standardmäßige Rastergrafik wie JPEG oder PNG in eine vektorbasierte SVG-Datei:

  1. Öffne Adobe Illustrator.
  2. Wähle „Datei > Öffnen“, und wähle dein Bild auf dem Computer aus.
  3. Klicke auf „Öffnen“.
  4. Klicke im oberen Menü auf die Option zum Nachzeichnen, und wähle „Bildnachzeichner“.
  5. Passe die Konvertierung an deine Spezifikationen an, zum Beispiel durch Farbänderungen.
  6. Wenn der Prozess abgeschlossen ist, wähle das nachgezeichnete Bild aus, und klicke auf „Gruppierung aufheben“. Dadurch werden die Farbformen voneinander getrennt.
  7. Wähle „Datei > Exportieren“.
  8. Speichere deine Datei als SVG.

Wie wandle ich eine SVG-Datei in PNG um?

So konvertierst du mit Adobe Photoshop eine SVG-Datei in PNG:

  1. Öffne Adobe Photoshop.
  2. Wähle Datei > Öffnen.
  3. Navigiere zu deiner SVG-Datei, und öffne sie.
  4. Klicke auf „Exportieren > Exportieren als > PNG“.
  5. Speichere deine Datei als PNG.

Häufig gestellte Fragen zu PNG- und SVG-Dateien.

Was ist das beste Vektorformat für den Druck?
Es gibt mehrere Vektorformate, die für den Druck geeignet sind. Welches Format du am besten verwendest, hängt vom Dokument ab. PDF-Dateien sind das vielseitigste Vektorformat für den täglichen Gebrauch. Für Print-Produktionen in großen Formaten ist SVG oder AI besser.

Soll ich lieber PNG oder JPEG verwenden?

Die verlustbehaftete Kompression und 24-Bit-Farbtiefe machen JPEG zum Standardformat für Fotos im Web. Beim Druck zeigen JPEG-Dateien jedoch weniger Details als PNG-Dateien an. JPEG-Dateien bieten außerdem nicht dieselbe Skalierbarkeit oder Definition wie PNG – für Logos und Grafiken sind sie deshalb nicht die beste Option.

Was ist der Unterschied zwischen PNG und GIF?

Bei beiden Formaten handelt es sich um standardmäßige Rasterformate für das Web. PNG ist im Grunde jedoch eine Weiterentwicklung von GIF. Allerdings gibt es einige Unterschiede zwischen diesen beiden Formaten. Zum Beispiel unterstützen PNG-Dateien keine Animation.

Gibt es bei PNG- und SVG-Dateien Größenbeschränkungen?

PNG-Dateien sind auf 2.500 Megapixel beschränkt. Vektordateien wie SVG sind in ihrer Größe nicht beschränkt.

https://main--cc--adobecom.hlx.page/cc-shared/fragments/seo-articles/express-blade

https://main--cc--adobecom.hlx.page/cc-shared/fragments/seo-articles/do-more-illustrator-color-blade

Das könnte dich auch interessieren:

https://main--cc--adobecom.hlx.page/cc-shared/fragments/seo-articles/seo-caas-collections/photo-caas-collection

https://main--cc--adobecom.hlx.page/cc-shared/fragments/discovery-hub/products-photoshop-segment-blade