SVG-Symbole im Vergleich zu PNG-Symbolen in 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 über SVGs der IE8 und dass SVG mehr CPU-Leistung verbraucht (aber ich glaube nicht, dass dies für einfache 1K-Symbole ein Problem darstellt). Ich sehe (und nutzen wir derzeit) viele Vorteile bei der Verwendung von SVGs, 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-Fonts konzentriert sich auf die Leistung und hat keine relevante Antwort, Icon Font vs. SVG-Caching und Netzwerkbedenken konzentrieren sich auf den Netzwerkverkehr, aber es ist leicht lösbar, z. B. durch Templating.)

Wenn die 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 wir uns nicht um IE8 kümmern und die Verwendung von SVG durch Templating und/oder Caching unterstützt wird, gibt es dann einen Haken, sich nur auf SVGs zu verlassen?

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 nach oben/unten skalieren, z. B. zu a Schwebeeffekt
• Sie können SVGs einbetten und mit JavaScript und dem DOM in Echtzeit Änderungen daran vornehmen
• Sie können SVGs und Teile von SVGs mit CSS stylen (Ändern von Farben, Umrissen usw.)
• Sie können SVGs entweder auf dem Client oder Server dynamisch generieren. Aufgrund ihrer textbasierten Natur benötigen Sie keine Low-Level-Bibliotheken oder leistungsstarke Server, um sie zu erstellen.

Gründe, warum PNG eine gute Wahl sein könnte:

• Browserunterstützung
• vorhandene Tools 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, wodurch die Dateigröße zunimmt und Daten möglicherweise unbeabsichtigt offengelegt werden
  • zB wenn Sie ein PNG in Inkscape exportieren, hat es den absoluten Pfad zu diesem Verzeichnis in der SVG gespeichert, wenn Sie es speichern
  • SVG-Kompressoren können dies entfernen, aber ich habe es nicht getestet (Sie können es gerne bearbeiten, wenn Sie es haben).

Sofern Sie nicht sehr einfache Formen/Designs zeigen 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 in doppelter Originalgröße (für Retina-Displays) erstellen und die Dateigröße ist immer noch um eine Größenordnung kleiner – ganz zu schweigen von der besseren Abdeckung für ältere Browser (keine Notwendigkeit für Javascript oder Polyfills).

Ich sage das als jemand, der Benutzeroberflächen mit Vektorgrafiken erstellt. Es ist ein großartiges Design-Tool, aber in Bezug auf Lieferung/Bandbreite/Reichweite ist es schwer, PNG zu übertreffen. Erst letzte Nacht habe ich ein bekanntes Logo getestet. CocaCola.svg war fast 20.000 groß. Da es sich um eine solide/flache Farbe handelte, habe ich als PNG-8 mit 12-Farben-Palettenkomprimierung exportiert und es 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 erhalten das Bild.

Das Beste daran ist, dass Sie ein PNG in eine Base64-Daten-URI umwandeln und 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 Stärken und Anwendungsfälle für beide gibt, aber PNG hat viel mehr Spuren hinterlassen und Sie stoßen auf weniger Widerstand, wenn Sie mit dem Strom schwimmen. Für die seltsamen Fälle, in denen SVG besser passt, empfehle ich dringend Dieser Artikel und diese Lernressource

Viel Spaß beim Gestalten!

SVG ist cool (wie FakeRainBrigand schön beschrieben hat) und schön gerendert, kann aber ziemlich komplex sein. Ein Browser hat mehr zu tun, wenn er mit Vektordaten statt mit pixelbasierten Bildern umgeht. Ein Bild ist ein Element, ein SVG kann viele Kinder haben, die sogar dem DOM hinzugefügt werden können, wenn es inline verwendet wird.

Ich habe keine wertvollen Performance-Tests durchgeführt, aber aus logischer Sicht sollte SVG vorsichtig verwendet werden, wenn es um die Performance geht, insbesondere im Umgang mit mobilen Browsern mittleren Alters (CPU-Belastung). Es wäre sehr nützlich, ein Diagramm zu haben, in dem Sie die CPU-Leistung sehen können, die von 100 SVG-Bildern im Vergleich zu 100 PNG-Bildern auf verschiedenen Android- und IOS-Geräten verbraucht wird …

Eine weitere nervige Sache mit SVG ist, dass das Tag ein Breiten- und Höhenattribut für einige Android/Samsung-Browser und unseren guten alten IE 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 scharf wiedergegeben wird.

Merken wir uns das leistungsmäßig SVG kann schrecklich werden. Sogar auf modernen Browsern wie Chrome (ich habe dies 2019 geschrieben!) lässt eine CMS-ähnliche Seite mit ein paar 100 (praktisch 3-800) SVG-Symbolen den Browser buchstäblich für mehr als 5 Sekunden hängen, um das Rendern abzuschließen. Währenddessen CPU auslasten.

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

Option #1: Konvertieren Sie SVGs in Webfont (Siehe Leistungsdiagramm hier:http://frozeman.de/blog/2013/08/warum-ist-svg-so-langsam/ )

Option 2: Greifen Sie auf einfache alte PNGs zurück

In solchen Situationen, in denen Sie nie etwas Ausgefallenes wie spontane Farbänderungen machen wollen und VIELE Instanzen von SVGs haben, erledigt das alte PNG die Arbeit und rettet den Tag!

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

SVG-Icons sind deutlich beliebter als PNG-Icons. Warum ist das so? Der Hauptgrund ist, dass sie einfacher zu erstellen sind und von den meisten Webbrowsern verarbeitet werden können. Der Nachteil ist, dass SVG-Symbole nicht die gleiche Qualität wie ihre PNG-Pendants haben. Sie unterstützen auch keine CSS-3D-Transformationen und können in einigen Apps Probleme verursachen, z. B. wenn sie in Verbindung mit einer Schaltfläche verwendet werden. Moderne Browser unterstützen jetzt Kostenlose SVG-Iconsdie einfach auf dem Server gespeichert und in clientseitigen Code geladen werden kann.

Nun, da dies eine alte Frage ist, werde ich nur die Tatsache aktualisieren, dass in modernen Browsern; mobil oder Desktop, in modernen Geräten; Telefone oder PCs, SVG ist die beste Option, wenn Sie nicht mit echten Fotos umgehen möchten, dann wähle ich .webp. Ich habe die Größe einer App um viele Megabyte verringert, indem ich nur optimierte SVGs für alle Bilder außer Fotos und für das letzte Webp verwendet habe.

Natürlich ist es 2021 und Geräte und Browser sind viel besser in Leistung und Support. Heutzutage ist es also bequemer, SVGs zu verwenden, und in letzter Zeit ist es sogar eine bessere Lösung, die SVG-Symbole zu verwenden, die von vielen Symbolschriften bereitgestellt werden, als die Schriftart selbst zu verwenden, da Sie möglicherweise eine ganze Schriftart laden und verarbeiten, aus der Sie stammen nur mit 10 bis 20 Symbolen.