Icônes SVG vs icônes PNG dans les sites Web modernes


91

Je me demande pourquoi si peu de sites Web modernes utilisent encore uniquement des PNG pour les icônes (mais cette hypothèse est juste basée sur mon observation). Jusqu'à présent, je sais, les principales raisons d'utiliser des PNG sur SVG sont IE8 et que SVG utilise plus de puissance de processeur (mais je ne pense pas que ce soit un problème pour les icônes simples 1K). Je peux voir (et nous utilisons actuellement) de nombreux avantages à utiliser les SVG, que ce soit lorsqu'ils sont utilisés comme sprites, comme images ou comme SVG en ligne.

(Question À la recherche d'une recherche: PNG Sprite vs SVG sprite vs polices Icon se concentre sur les performances et n'a pas de réponse pertinente, Icon Font vs SVG cache et le problème de réseau se concentre sur le trafic réseau, mais il est facilement résolu par exemple.)

Si le nouveau site Web ne prend en charge que les navigateurs modernes, y a-t-il une raison pour ne pas utiliser les SVG (ou - y a-t-il une raison d'utiliser des PNG pour les icônes)? Si nous ne nous soucions pas d'IE8 et que l'utilisation de SVG est sauvegardée par la création de modèles et / ou la mise en cache, y a-t-il un problème à ne compter que sur les SVG?


12
Cher électeur, pourriez-vous me faire savoir ce qui est spécifiquement basé sur l'opinion sur cette question, où j'ai demandé des raisons spécifiques - techniques? J'apprécierais ces commentaires, afin que je puisse améliorer mes questions.
Robert Goldwein le

27
Robert, cela ne semble pas basé sur une opinion, mais les gens passent parfois en mode zombie et ne font que parcourir les questions sans les lire.
Brigand

Je préfère png pour la simplicité et un DOM plus propre. Un point à ajouter aux réponses ci-dessous est qu'avec svg, vous pouvez changer la couleur de manière dynamique. Si une icône a trois couleurs: régulière, active et survolée, c'est 3 images png mais un seul svg.
CodeToad

@Robert [ZOMBIE MODE] est un homme excellent :): D
QMaster

Réponses:


105

Raisons pour lesquelles SVG peut être un bon choix:

  • il prend en charge de manière transparente les navigateurs de toute taille, en particulier avec les css background-size
  • vous pouvez les mettre à l'échelle vers le haut / vers le bas, par exemple en un effet de survol
  • vous pouvez intégrer des SVG et y apporter des modifications en temps réel avec JavaScript et le DOM
  • vous pouvez styliser des SVG et des parties de SVG avec CSS (changement de couleurs, contours, etc.)
  • vous pouvez générer des SVG dynamiquement, sur le client ou sur le serveur. En raison de leur nature textuelle, vous n'avez pas besoin de bibliothèques de bas niveau ou de serveurs puissants pour les créer.

Raisons pour lesquelles PNG peut être un bon choix:

  • support du navigateur
  • outils existants pour la création de feuilles de sprites PNG
  • la plupart des gens ont un éditeur compatible PNG sur leur ordinateur
  • vos graphiques sont des photos ou d'autres images difficiles à vectoriser

Autres préoccupations:

  • certains éditeurs SVG peuvent stocker des métadonnées dans vos SVG, augmentant la taille du fichier et éventuellement exposant involontairement des données
    • par exemple, lorsque vous exportez un PNG dans Inkscape, il a enregistré / enregistre le chemin absolu de ce répertoire dans le SVG lorsque vous enregistrez
    • Les compresseurs SVG peuvent supprimer cela, mais je ne l'ai pas testé (n'hésitez pas à modifier si vous l'avez fait)

Merci, nos graphistes créent des SVG dans Illustrator, puis les éditent à la main, donc c'est généralement <svg> avec peu d'éléments et d'attributs, donc ces préoccupations sont muettes - ma préoccupation était que j'ai négligé quelque chose de sérieux, car je ne vois presque que des avantages sur les PNG classiques - mais cela se résume probablement à <= IE8 ou> IE8. Par exemple, une icône standard avec un cercle avec le signe plus est encore plus compacte en SVG qu'en PNG.
Robert Goldwein

Oui, certaines personnes obtiennent leurs SVG de tiers et ne les ouvrent pas dans un éditeur de texte ou ne s'assurent pas qu'ils sont compressés. Je ne voulais tout simplement pas laisser cela de côté. Il y a les mêmes problèmes avec les PNG maintenant que j'y pense; des données souvent inutiles (dans le contexte du web) y sont stockées. Ces données sont utilisées par les éditeurs, les navigateurs de fichiers et d'autres programmes. Ceci est cependant plus courant avec les jpeg (marque, modèle, objectif, paramètres, etc.).
Brigand

1
Merci, donc je suppose qu'il n'y a vraiment aucun inconvénient à utiliser les SVG dans nos projets et nous les intégrerons encore plus profondément. Nous vous remercions de votre point de vue.
Robert Goldwein le

Les polices d'icônes sont la bonne façon de procéder pour les icônes vectorielles. Pour moi, le plus gros inconvénient des icônes SVG est que l'attribut de données dans CSS ne fonctionne pas pour IE10 / 11.
Gerfried

Les polices @Gerfried Icon ont cependant de nombreux problèmes d'accessibilité. Dès qu'un utilisateur décide de bloquer les polices Web ou de remplacer toutes les polices par les leurs (pour quelque raison que ce soit), toutes ces jolies icônes se cassent instantanément. Il existe des solutions de repli mais je n'ai pas encore vu de solution 100% fonctionnelle. Ce n'est pas le cas des images SVG.
tomasz86

12

À moins que vous ne montriez des formes / conceptions très simples ou que vous ayez spécifiquement besoin de modifier des parties du graphique avec l'application, il n'y a pas beaucoup d'incitation à utiliser SVG. Vous pouvez produire un PNG à deux fois la taille d'origine (pour les écrans Retina) tout en réduisant la taille du fichier d'un ordre de grandeur - sans parler d'une meilleure couverture pour les navigateurs hérités (pas besoin de javascript ou de polyfills).

Je dis cela en tant que personne qui construit des interfaces utilisateur avec des graphiques vectoriels. C'est un outil de conception génial, mais pour la livraison / la bande passante / la portée, il est difficile de dépasser le PNG. Hier soir, j'ai testé un logo bien connu. CocaCola.svg était presque 20K. Comme il s'agissait d'une couleur unie / plate, j'ai exporté au format PNG-8 avec une compression de palette de 12 couleurs et je l'ai réduit à 1,6K (!!!) Pour quelques logos, ce n'est pas un gros problème, mais quand vous devez en montrer 40 d'entre eux .. eh bien, vous voyez l'image.

La meilleure partie est que vous pouvez transformer un PNG en un uri de données base64 et les intégrer directement dans votre feuille de style. Cela n'est pas recommandé avec SVG - un format déjà réputé pour ses problèmes de performances et de compatibilité, en particulier sur les navigateurs mobiles.

En terminant, je dois dire qu'il y a des forces et des cas d'utilisation pour les deux, mais la PNG a ouvert beaucoup plus de pistes et vous faites face à moins de résistance lorsque vous suivez le courant. Pour les cas étranges où SVG convient mieux, je recommande vivement cet article et cette ressource d'apprentissage

Bonne conception!


OMI, c'est la meilleure réponse.
Marco Demaio

Vous devez spécifier le logo Coca Cola avec lequel vous avez travaillé. Le logo actuel de 2007 est très simple et fait environ 8 Ko . Ce n'est toujours rien comparé au PNG-8, mais bien mieux que 20 Ko.
Caleb Taylor

11

SVG est cool (comme FakeRainBrigand l'a bien décrit) et rend magnifiquement mais peut être assez complexe. Un navigateur a plus de travail à faire lorsqu'il traite des données vectorielles plutôt que des images basées sur des pixels. Une image est un élément, un SVG peut avoir beaucoup d'enfants qui peuvent même être ajoutés au DOM lorsqu'il est utilisé en ligne.

Je n'ai pas fait de tests de performances précieux, mais d'un point de vue logique, SVG doit être utilisé avec précaution lorsqu'il s'agit de performances, en particulier lorsqu'il s'agit de navigateurs mobiles d'âge moyen (stress CPU). Ce serait très utile d'avoir un graphique où vous pouvez voir la puissance du processeur consommée par 100 images SVG contre 100 images PNG sur différents appareils Android et IOS ...

Un autre problème avec SVG est que la balise a besoin d'un attribut de largeur et de hauteur pour certains navigateurs Android / Samsung et notre bon vieil IE. Et la plupart des éditeurs SVG modernes comme A *** e Illustrator ajoutent simplement l'attribut "viewBox".

La chose la plus cool à propos de SVG est qu'il rend agréable et net dans n'importe quelle densité de pixels.


3

C'est vrai, le png est utilisé presque partout. Je pense que c'est parce que le SVG, dans la plupart des cas, est assez inutile, l'image devrait être plus grande (je pense) et l'ordinateur doit régénérer l'image chaque fois que vous la zoomez (parce que vous faites toujours un zoom sur les images, n'est-ce pas ?) Je pense que c'est la raison la plus importante.


26
Les SVG sont TRÈS utiles pour les icônes, qui sont omniprésentes dans les sites Web modernes (mobiles). Ils offrent une mise à l'échelle et un style CSS sans pénalités de qualité, deux caractéristiques importantes qui ne sont pas présentes avec les png.
user1884155

Du point de vue de l'utilisateur, cela ne sert à rien, mais en tant que développeur multimédia, il est bon de n'utiliser qu'un seul fichier qui peut être utilisé sur n'importe quel écran et qui conservera toujours la même qualité.
sebastian romero

2

Notons que le SVG performant peut devenir horrible. Même sur les navigateurs modernes, comme Chrome (écrit ceci en 2019!), Une page de type CMS avec quelques centaines d'icônes svg (pratiquement 3 à 800) suspend littéralement le navigateur pendant plus de 5 secondes pour terminer le rendu. Maximiser le processeur en attendant.

Comme indiqué ailleurs, le nombre de SVG intégrés dans la page augmente de manière expontentielle la charge sur le navigateur, donc si vous êtes confronté à une telle situation

Option n ° 1: convertir les svgs en polices Web (voir le tableau des performances ici: http://frozeman.de/blog/2013/08/why-is-svg-so-slow/ )

Option n ° 2: revenir aux anciens PNG

Dans de telles situations où vous ne voulez jamais rien faire d'extraordinaire comme la modification de couleur à la volée, et que vous avez BEAUCOUP d'instances de SVG, l'ancien PNG fait le travail et sauve la journée!


je ne pense pas, SVG a de meilleures performances. recommanderais de lire ceci: vecta.io/blog/comparing-svg-and-png-file-sizes
Harry Sarshogh le
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.