Vergleich der Dateiformate PNG und SVG.

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.

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.

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.