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?

[OliverIO]

@MartinP

wenn das svg normale 2d operationen enthält dann nein.
selbst einfachste grafische User Interfaces basieren auf solchen Operationen
Das wären aus dem Index von w3schools auf der linken Seite alle Operationen von Rectangle bis Stroke.

Die Operationen weiter unten und ganz speziell https://www.w3schools.com/graphics/svg_filters_intro.asp
können den rechner und auch die grafikkarte an die grenzen bringen
Auch 3d ist mit svg möglich, das ist auch anspruchsvoller
https://sketchfab.com/3d-models/svg-example-9dc7e5ad8acf489aa02c503793a5ba12
https://sketchfab.com/3d-models/fnaf-sb-fixed-ruined-roxy-5179daf5af2c405aa729bc95487b053f

aber die normalen icons als svg sind alle kein problem

das folgende schluckt schon etwas mehr ressourcen
svgdemo1.mp4
das haben wir letztes jahr als show case für einen kunden gemacht.
das sind 3 svg ringe, die jeweils heftig mit den besagten filtern zerstreut werden.