Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨

[Cyberraph]

Hallo zusammen!

Ihr fasst euch sicher an den Kopf bei der Frage, aber nur zum allgemeinen Verständnis.

Beispielsweise das Mfd-Icons Set gibt es in PNG Format und als SVG Format.

Welche Vor- und Nachteile haben PNG Bilder und wo ist der "richtige" Anwendungsfall diese zu nehmen?

Welche Vor- und Nachteile haben SVG Bilder und wo ist der "richtige" Anwendungsfall diese zu nehmen?

Laienhaft, soweit ich es mal aufgeschnappt habe:
PNG sind nicht skalierbar und haben eine fixe Größe / Auflösung in der sie erstellt wurden,
d.h. ab einer Bestimmten Ausdehnung werden sie unscharf in der Darstellung.

SVG sind scalable vector grafiken -> d.h. diese sind flexibel in der Größe und bleiben immer "scharf".
Und diese können zusätzlich beliebig farblich ausgefüllt werden bzw. kann man eine Farbe mitgeben.

Ist das korrekt?

PS:
Hab zwar die Suche versucht, aber keine Forenbeiträge wirklich gefunden über SVG und PNGs...

[OliverIO]

@Cyberraph

Das ist im großen Ganzen korrekt.
SVG ist auch stufenlos skalierbar
Bei PNG können seltsame Treppeneffekte entstehen und das Bild kann auch ungleich aussehen, wenn man es nicht immer um den 2 skaliert

[Cyberraph]

@oliverio
Sprich es macht eigentlich immer Sinn SVGs zu nehmen überall (wenn verfügbar), oder?

[OliverIO]

@Cyberraph

Ja meist sind die Dateien auch kleiner

[Asgothian]

@Cyberraph sagte in PNG und SVG:

eigentlich immer Sinn SVGs zu nehmen überall

Bedingt ja. Es gibt Dinge die bei SVG nicht so ohne weiteres möglich sind.

• Natürlich aussehende Gesichter.
• feine Farbverläufe in mehreren Richtungen.

Aber: Bei Icons und Grafiken ist das zumeist nicht gewünscht.

Nimm Deinen Forum-Avatar und den von @oliverio als Beispiel:

• deiner funktioniert als SVG oder PNG.
• der von OliverIO funktioniert nicht (gut) als SVG, aber gut als PNG.

A.
Nachtrag: Mit hinreichend Aufwand kann man fast jedes PNG in ein SVG mit vergleichbarer Qualität verwandeln. Oft erzeugt das aber eine Unhandliche Frankendatei die ähnlich gross ist wi das PNG und änlich schlecht skaliert.

[skvarel]

In Bezug auf VIS nutze ich nur noch SVG. Sie lassen sich in den Widgets besser umfärben (bei PNG müssen sie in Schwarz vorliegen, damit es mit einem CSS Filter klappt).

Weiterer Vorteil (wie Oliver schon sagte) ist die Skalierbarkeit und auch die Animation ist einfacher.

Deswegen habe ich für VIS2 extra einen SVG Adapter gebastelt. Mein erster Adapter beinhaltet nur PNG.

[Cyberraph]

Danke für die Erklärungen ich dachte mir schon Einiges, aber das untermauert alles nochmal mehr. :-)

[MartinP]

Gibt es vielleicht Nachteile bei schwachbrüstiger Hardware bei der Darstellung des Vektorbildes?