SVG-Symbole vs. PNG-Symbole auf modernen Websites

Ich frage mich, warum so wenige moderne Websites immer noch nur PNGs für Symbole verwenden (aber diese Annahme basiert nur auf meiner Beobachtung). Soweit ich weiß, sind die Hauptgründe für die Verwendung von PNGs gegenüber SVGs IE8 und dass SVG mehr CPU-Leistung verbraucht (aber ich glaube nicht, dass dies ein Problem für einfache 1K-Symbole ist). Ich kann (und wir nutzen derzeit) viele Vorteile bei der Verwendung von SVGs sehen, entweder wenn sie als Sprites, als Bilder oder als Inline-SVG verwendet werden.

(Frage Auf der Suche nach einer Recherche: PNG Sprite vs SVG Sprite vs Icon-Schriftarten konzentrieren sich auf die Leistung und haben keine relevante Antwort, Icon Font vs. SVG-Caching und Netzwerkprobleme konzentrieren sich auf den Netzwerkverkehr, aber es ist leicht lösbar, z. B. durch Vorlagen.)

Wenn eine neue Website nur moderne Browser unterstützt, gibt es einen Grund, SVGs nicht zu verwenden (oder - gibt es einen Grund, PNGs für Symbole zu verwenden)? Wenn uns IE8 nicht wichtig ist und die Verwendung von SVG durch Vorlagen und / oder Caching gesichert wird, gibt es einen Haken, der sich nur auf SVGs verlassen kann?

Gründe, warum SVG eine gute Wahl sein kann:

• Es unterstützt nahtlos Browser jeder Größe, insbesondere mit CSS background-size
• Sie können sie vergrößern / verkleinern, um beispielsweise einen Schwebeflug zu erzielen
• Sie können SVGs einbetten und mit JavaScript und dem DOM in Echtzeit ändern
• Sie können SVGs und Teile von SVGs mit CSS formatieren (Ändern von Farben, Konturen usw.).
• Sie können SVGs dynamisch entweder auf dem Client oder auf dem Server generieren. Aufgrund ihrer textbasierten Natur benötigen Sie keine Bibliotheken auf niedriger Ebene oder leistungsstarke Server, um sie zu erstellen.

Gründe, warum PNG eine gute Wahl sein kann:

• Browser-Unterstützung
• vorhandene Werkzeuge zum Erstellen von PNG-Spritesheets
• Die meisten Leute haben einen PNG-kompatiblen Editor auf ihrem Computer
• Ihre Grafiken sind Fotos oder andere schwer zu vektorisierende Bilder

Andere Bedenken:

• Einige SVG-Editoren speichern möglicherweise Metadaten in Ihren SVGs, erhöhen die Dateigröße und legen möglicherweise unbeabsichtigt Daten offen
  • Wenn Sie beispielsweise ein PNG in Inkscape exportieren, wird beim Speichern der absolute Pfad zu diesem Verzeichnis im SVG gespeichert
  • SVG-Kompressoren können dies entfernen, aber ich habe es nicht getestet (zögern Sie nicht zu bearbeiten, wenn Sie haben)

SVG ist cool (wie FakeRainBrigand gut beschrieben) und rendert wunderschön, kann aber ziemlich komplex sein. Ein Browser hat mehr Arbeit zu erledigen, wenn er sich mit Vektordaten anstatt mit pixelbasierten Bildern befasst. Ein Bild ist ein Element, ein SVG kann viele untergeordnete Elemente enthalten, die bei Inline-Verwendung sogar zum DOM hinzugefügt werden können.

Ich habe keine wertvollen Leistungstests durchgeführt, aber aus logischer Sicht sollte SVG in Bezug auf die Leistung sorgfältig verwendet werden, insbesondere im Umgang mit mobilen Browsern mittleren Alters (CPU-Stress). Es wäre sehr nützlich, ein Diagramm zu haben, in dem Sie die von 100 SVG-Bildern verbrauchte CPU-Leistung im Vergleich zu 100 PNG-Bildern auf verschiedenen Android- und IOS-Geräten sehen können ...

Ein weiteres Problem mit SVG ist, dass das Tag für einige Android / Samsung-Browser und unseren guten alten IE ein Attribut für Breite und Höhe benötigt. Und die meisten modernen SVG-Editoren wie A *** e Illustrator fügen einfach das Attribut "viewBox" hinzu.

Das Coolste an SVG ist, dass es in jeder Pixeldichte schön und knackig ist.

Sofern Sie keine sehr einfachen Formen / Designs anzeigen oder Teile der Grafik mit der App speziell ändern müssen, gibt es keinen großen Anreiz, SVG zu verwenden. Sie können ein PNG mit der doppelten Originalgröße (für Retina-Displays) erstellen und trotzdem die Dateigröße um eine Größenordnung verkleinern - ganz zu schweigen von einer besseren Abdeckung für ältere Browser (kein Javascript oder Polyfills erforderlich).

Ich sage dies als jemand, der Benutzeroberflächen mit Vektorgrafiken erstellt. Es ist ein fantastisches Design-Tool, aber für Lieferung / Bandbreite / Reichweite ist es schwierig, PNG zu übertreffen. Erst letzte Nacht habe ich ein bekanntes Logo getestet. CocaCola.svg war fast 20K. Da es sich um eine Vollton- / Flachfarbe handelte, habe ich sie als PNG-8 mit 12-Farben-Palettenkomprimierung exportiert und auf 1,6 KB (!!!) reduziert. Für nur ein paar Logos ist es keine große Sache, aber wenn Sie 40 anzeigen müssen von ihnen .. nun, Sie bekommen das Bild.

Das Beste daran ist, dass Sie ein PNG in eine Base64-Daten-URL umwandeln und diese direkt in Ihr Stylesheet einbetten können. Dies wird bei SVG nicht empfohlen - einem Format, das bereits für Leistungs- und Kompatibilitätsprobleme bekannt ist, insbesondere bei mobilen Browsern.

Abschließend muss ich sagen, dass es für beide Stärken und Anwendungsfälle gibt, aber PNG hat viel mehr Wege beschritten und Sie sind weniger Widerstand ausgesetzt, wenn Sie mit der Strömung fahren. Für die seltsamen Fälle, in denen SVG besser passt, empfehle ich diesen Artikel und diese Lernressource

Viel Spaß beim Entwerfen!

Es ist wahr, PNG wird fast überall verwendet. Ich denke, das liegt daran, dass die SVG-Datei in den meisten Fällen ziemlich nutzlos ist, das Bild größer sein sollte (glaube ich) und der Computer das Bild immer dann neu generieren muss, wenn Sie es zoomen (weil Sie die Bilder immer zoomen, nicht wahr? ?) Ich denke das ist der wichtigste Grund.

Beachten Sie, dass leistungsbezogenes SVG schrecklich werden kann. Selbst in modernen Browsern wie Chrome (dies wurde 2019 geschrieben!) Hängt eine CMS-ähnliche Seite mit einigen 100 (praktisch 3-800) SVG-Symbolen den Browser buchstäblich für mehr als 5 Sekunden, um das Rendern abzuschließen. In der Zwischenzeit die CPU voll ausschöpfen.

Wie an anderer Stelle erwähnt, erhöht die Anzahl der in die Seite eingebetteten SVGs die Belastung des Browsers exponentiell. Wenn Sie also mit einer solchen Situation konfrontiert sind

Option 1: Konvertieren von SVGs in Webfont (Siehe Leistungstabelle hier: http://frozeman.de/blog/2013/08/why-is-svg-so-slow/ )

Option 2: Auf einfache alte PNGs zurückgreifen

In solchen Situationen, in denen Sie niemals etwas Besonderes wie eine sofortige Farbänderung vornehmen möchten und VIELE Instanzen von SVGs haben, erledigt das alte PNG die Aufgabe und spart den Tag!