SVG-Symbole vs. PNG-Symbole in modernen Websites

Frage ich mich, warum so wenige moderne Websites verwenden immer noch nur das PNG-Format für icons (aber diese Annahme ist nur meine Beobachtung). So weit ich weiß, wichtigsten Gründe für die Verwendung von PNGs über SVGs sind IE8 und SVG verwendet mehr CPU-power (aber ich glaube nicht, dass dies irgendein Problem für einfachen 1K-Symbole). Ich kann sehen, (und wir verwenden derzeit) viele Vorteile in der Verwendung SVGs, entweder als sprites, die als Bilder oder als inline-SVG.

(Frage Suche für eine recherche: PNG-Sprite vs SVG Sprites vs. Icon-fonts konzentriert sich auf die Leistung und nicht relevante Antwort, Icon-Font vs. SVG caching und Netzwerk betreffen konzentriert sich auf die Netzwerk-traffic, aber es ist leicht lösbar, indem z.B. das templating.)

Wenn neue Webseite unterstützt nur moderne Browser, gibt es einen Grund für die Verwendung von SVGs (oder - gibt es einen Grund für die Verwendung von PNG-Format für icons)? Wenn wir kümmern uns nicht um den IE8 und den Einsatz von SVG wird unterstützt durch Template-und/oder Zwischenspeichern, da ist jeder Fang, verlassen Sie sich nur auf SVGs?

InformationsquelleAutor der Frage Robert Goldwein | 2014-06-26

  1. 79

    Gründen SVG kann eine gute Wahl sein:

    • es nahtlos unterstützt die Browser von jeder Größe, vor allem mit css background-size
    • Sie können Sie skalieren up/down-werden, wie zu einem hover-Effekt
    • Sie können beim einbetten von SVGs und Echtzeit-Veränderungen mit JavaScript und DOM -
    • können Sie Stil SVGs und Teile von SVGs mit CSS (Farben ändern, outlines, etc.)
    • Sie können SVGs generieren dynamisch, entweder auf dem client oder server. Aufgrund Ihrer text-basierten Natur, Sie brauchen keine low-level-Bibliotheken oder leistungsstarken Servern, um Sie zu erstellen.

    Gründen PNG kann eine gute Wahl sein:

    • browser-Unterstützung
    • bestehenden Werkzeugen für die Erstellung von PNG-spritesheets
    • die meisten Menschen haben eine PNG-kompatiblen editor auf Ihrem computer
    • Ihre Grafiken, Fotos oder anderen schwer zu Vektorisieren von Bildern

    Andere sorgen:

    • einige SVG-Editoren können die Metadaten in Ihre SVGs, die Erhöhung der Dateigröße und möglicherweise unbeabsichtigt Verfügbarmachen von Daten
      • z.B. beim export eines PNG in Inkscape, es Tat/tut speichern den absoluten Pfad zu diesem Verzeichnis in der SVG beim speichern
      • SVG-Kompressoren können entfernen Sie diese, aber ich habe es noch nicht getestet (fühlen Sie sich frei zu Bearbeiten, wenn Sie haben)

    InformationsquelleAutor der Antwort FakeRainBrigand

  2. 8

    SVG ist cool (wie FakeRainBrigand schön beschrieben) und macht schön, aber kann ziemlich Komplex.
    Ein browser hat mehr Arbeit zu tun, wenn der Umgang mit Vektor-Daten anstelle von pixel-basierten Bildern. Ein Bild ist ein element einer SVG-könnten viele Kinder, die können auch Hinzugefügt werden, um den DOM, wenn verwendet, inline.

    Ich nicht tun, keine wertvolle performance-tests, aber aus logischer Sicht SVG sollte vorsichtig verwendet werden, wenn es um die performance vor allem beim Umgang mit mittleren Alter mobile Browser (CPU-stress).
    Wäre sehr nützlich, um eine Karte, wo Sie sehen können der CPU-Leistung verbraucht von 100 SVG-Bilder vs 100 PNG-Bildern, die auf verschiedenen Android-und IOS-Geräte ...

    Anderen nervt, was mit SVG ist, dass der Tag braucht eine Breite und height-Attribut bei einigen Android - /Samsung-unabhängig von Browser und unseren guten alten IE. Und die meisten modernen SVG-Editoren wie A***e Illustrator fügen Sie einfach die "viewBox" - Attribut.

    Das coolste, was SVG ist, dass es macht schön und knackig in jedem pixel-Dichte.

    InformationsquelleAutor der Antwort corpirate

  3. 3

    Es ist wahr, png ist fast überall.
    Ich denke, es ist, weil der SVG, in den meisten Fällen, ist ziemlich nutzlos, sollte das Bild größer sein (denke ich) und die computer haben sich zu regenerieren das Bild, Wann immer Sie ihn zu vergrößern (da man immer Zoomen der Bilder, nicht wahr?)
    Ich denke, dies ist der wichtigste Grund.

    InformationsquelleAutor der Antwort barbaanto

  4. 3

    Es sei denn, Sie zeigen sehr einfache Formen/designs oder speziell anpassen müssen, um Teile der Grafik mit der app, es gibt nicht eine ganze Menge Anreiz zur Nutzung des SVG. Produzieren Sie eine PNG-auf das doppelte der ursprünglichen Größe (für retina displays) und habe noch die filesize um eine Größenordnung kleiner - nicht zu erwähnen, eine bessere Versorgung für ältere Browser (keine Notwendigkeit für javascript oder polyfills).

    Ich sage dies als jemand, der baut UIs mit Vektor-Grafiken. Es ist ein tolles design-tool, aber für die Lieferung/Bandbreite/Reichweite, es ist schwer zu top-PNG. Gerade Letzte Nacht habe ich getestet, ein bekanntes logo. CocaCola.svg wurde fast 20K. Da war es eine solide - /Flachbild-Farbe, die ich exportiert Sie als PNG-8 mit 12-Farben-palette, Komprimierung und haben es bis zu 1,6 K (!!!) Für nur ein paar logos ist es nicht eine große Sache, aber wenn Sie haben, um zu zeigen, 40 von Ihnen.. gut, Sie erhalten das Bild.

    Der beste Teil ist, dass Sie ein PNG in ein base64-Daten-uri und bettet diese direkt in Ihrem stylesheet. Dies ist nicht empfehlenswert, mit dem SVG - format ist bereits bekannt für die performance-und Kompatibilitätsprobleme, vor allem auf mobilen Browsern.

    Abschließend muss ich sagen, es gibt stärken und use cases für die beiden, aber PNG ist strahlten viel mehr Wege und Ihr Gesicht weniger Widerstand, wenn Sie gehen mit dem Strom. Für diejenigen ungeraden Fällen, in denen SVG macht eine bessere Passform, ich empfehle dieser Artikel und diese Lernressource

    Gerne Entwerfen!

    InformationsquelleAutor der Antwort Steven Garcia

Schreibe einen Kommentar