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

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?

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)

À 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!

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.

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.

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!