it-swarm.com.de

SVG-Icons vs. PNG-Icons in modernen Websites

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

(Frage Auf der Suche nach einer Recherche: PNG Sprite vs SVG Sprite vs Icon-Schriften konzentriert sich auf die Leistung und hat keine relevante Antwort, Icon Font vs. SVG-Caching und Netzwerkproblematik konzentriert sich auf Netzwerkverkehr, aber es ist leicht lösbar, zB durch Vorlage.)

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 es uns nicht um IE8 geht und die Verwendung von SVG durch Templating und/oder Caching gesichert wird, gibt es dann einen Haken, der sich nur auf SVGs stützt?

79
Robert Goldwein

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

  • es unterstützt nahtlos Browser jeder Größe, insbesondere mit CSS's background-size
  • sie können sie nach oben/unten skalieren, z. B. auf Hover-Effekt
  • mit JavaScript und dem DOM können Sie SVGs einbetten und 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 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 sich die Dateigröße erhöht und möglicherweise ungewollt Daten verfügbar gemacht werden
    • z.B. Wenn Sie eine PNG-Datei in Inkscape exportieren, wurde der absolute Pfad zu diesem Verzeichnis in der SVG-Datei beim Speichern gespeichert
    • SVG-Kompressoren können dies entfernen, aber ich habe es nicht getestet (Sie können es gerne bearbeiten, wenn Sie dies getan haben)
93
Brigand

SVG ist cool (wie FakeRainBrigand schön beschrieben) und rendert schön, kann aber ziemlich komplex sein. Ein Browser hat mehr zu tun, wenn es um Vektordaten geht, als um pixelbasierte Bilder. Ein Bild ist ein Element. Eine 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 vorsichtig eingesetzt werden, insbesondere im Umgang mit mobilen Browsern mittleren Alters (CPU-Belastung). Es wäre sehr nützlich, ein Diagramm zu haben, in dem die von 100 SVG-Bildern verbrauchte CPU-Leistung im Vergleich zu 100 PNG-Bildern auf verschiedenen Android- und IOS-Geräten angezeigt wird.

Ein weiteres Problem mit SVG ist, dass das Tag für einige Android-/Samsung-Browser und unseren guten alten IE ein width- und height-Attribut 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 rendert.

10
corpirate

Sofern Sie nicht sehr einfache Formen/Designs zeigen oder bestimmte Teile der Grafik mit der App ändern müssen, gibt es nicht viele Anreize für die Verwendung von SVG. Sie können ein PNG mit der doppelten Originalgröße (für Retina-Displays) erstellen und trotzdem die Dateigröße um eine Größenordnung verringern - ganz zu schweigen von der 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 die Bereitstellung/Bandbreite/Reichweite ist es schwer, PNG zu toppen. Erst letzte Nacht habe ich ein bekanntes Logo getestet. CocaCola.svg war fast 20K. Da es einfarbig/flach war, exportierte ich es als PNG-8 mit 12-Farbpaletten-Komprimierung und reduzierte es auf 1,6 KB (!!!). Für nur einige Logos ist es keine große Sache, aber wenn man 40 zeigen muss von ihnen .. na ja, du bekommst das Bild.

Das Beste daran ist, dass Sie eine PNG in eine Base64-Daten-Uri verwandeln 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 Stärken und Anwendungsfälle für beide gibt, aber PNG hat viel mehr Pfade gebahnt und Sie haben weniger Widerstand, wenn Sie mit der Strömung gehen. Für die merkwürdigen Fälle, in denen SVG besser passt, empfehle ich dringend diesen Artikel und diese Lernressource

Viel Spaß beim Entwerfen!

6
Steven Garcia

Es ist wahr, PNG wird fast überall verwendet. Ich denke, das liegt daran, dass das 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 zoomen (weil Sie die Bilder immer zoomen, nicht wahr?) ?) Ich denke das ist der wichtigste Grund.

2
barbaanto

Beachten wir, dass Performance-bezogenes SVG schrecklich werden kann. Selbst in modernen Browsern wie Chrome (wird 2019 geschrieben!)) Hängt eine CMS-ähnliche Seite mit einigen 100s (praktisch 3-800) SVG-Symbolen den Browser buchstäblich für mehr als 5 Sekunden In der Zwischenzeit wird die CPU ausgelastet.

Wie an anderer Stelle erwähnt, erhöht die Anzahl der in die Seite eingebetteten SVGs die Belastung des Browsers exponentiell

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

Option 2: Rückgriff auf einfache alte PNGs

In solchen Situationen, in denen Sie nie Lust auf spontane Farbmodifikationen haben und VIELE Instanzen von SVGs haben, erledigt das alte PNG die Arbeit und spart den Tag!

0
Joe7