Icônes SVG et icônes PNG dans les sites Web modernes
Je me demande pourquoi si peu de sites Web modernes n'utilisent encore que les PNG pour les icônes (mais cette hypothèse ne repose que sur mon observation). Jusqu'ici, je sais que les principales raisons d'utiliser des fichiers PNG par rapport aux SVG sont IE8 et que SVG utilise plus de puissance de calcul (mais je ne crois pas que ce soit un problème pour les simples icônes 1K). Je peux voir (et nous utilisons actuellement) de nombreux avantages à l’utilisation de SVG, qu’ils soient utilisés comme images-objets, comme images ou comme SVG en ligne.
(Question Recherche d'une recherche: polices PNG Sprite vs SVG Sprite vs Icon se concentre sur les performances et n'a pas de réponse pertinente, Police d'icônes vs mise en cache SVG et réseau préoccupé se concentre sur sur le trafic réseau, mais il est facile à résoudre en utilisant, par exemple, des modèles.)
Si le nouveau site Web ne prend en charge que les navigateurs modernes, existe-t-il une raison de ne pas utiliser de SVG (ou - y a-t-il une raison d'utiliser PNG pour les icônes)? Si nous ne nous intéressons pas à IE8 et si l'utilisation de SVG est sauvegardée par des modèles et/ou par la mise en cache, y a-t-il moyen de ne compter que sur les SVG?
Raisons SVG peut être un bon choix:
- il supporte de manière transparente les navigateurs de toutes tailles, en particulier avec css's
background-size - vous pouvez les ajuster à la hausse ou à la baisse, par exemple à 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 (couleurs changeantes, contours, etc.)
- vous pouvez générer des fichiers SVG de manière dynamique, sur le client ou sur le serveur. En raison de leur nature textuelle, vous n'avez pas besoin de bibliothèques de bas niveau ni de serveurs puissants pour les créer.
Les raisons pour lesquelles PNG peut être un bon choix:
- support du navigateur
- outillage existant pour la création de feuilles de sélection 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 fichiers SVG, ce qui augmente la taille du fichier et peut-être même exposer des données par inadvertance
- par exemple. Lorsque vous exportez un fichier PNG dans Inkscape, le chemin absolu vers ce répertoire dans le fichier SVG a été sauvegardé.
- Les compresseurs SVG peuvent supprimer cela, mais je ne l'ai pas testé (n'hésitez pas à le modifier si vous en avez un)
SVG est cool (comment FakeRainBrigand est joliment décrit) et rend bien mais peut être assez complexe. Un navigateur a plus de travail à faire lorsqu'il s'agit de données vectorielles plutôt que d'images à base de pixels. Une image est un élément, un fichier SVG peut avoir de nombreux enfants qui peuvent même être ajoutés au DOM lorsqu'il est utilisé en ligne.
Je n'ai pas fait de tests de performance utiles, mais d'un point de vue logique, SVG doit être utilisé avec prudence en matière de performances, en particulier pour les navigateurs mobiles d'âge moyen (contrainte de calcul). Il serait très utile d’avoir un tableau où vous pourrez voir la puissance du processeur consommée par 100 images SVG et 100 images PNG sur différents Android et IOS périphériques .. .
Un autre problème avec SVG est que le Tag a besoin d'un attribut width et height pour certains navigateurs Android/Samsung, quels que soient les navigateurs et notre bon vieil IE. Et la plupart des éditeurs SVG modernes, tels que A *** e Illustrator, ajoutent simplement l'attribut "viewBox".
La chose la plus intéressante à propos de SVG est qu’elle rend Nice et nette, quelle que soit la densité de pixels.
Sauf si vous affichez des formes/conceptions très simples ou si vous avez spécifiquement besoin de modifier des parties du graphique avec l'application, rien ne vous incite à utiliser SVG. Vous pouvez produire un fichier PNG avec une taille deux fois supérieure à celle d'origine (pour les affichages rétiniens) tout en réduisant la taille du fichier - sans parler de la couverture améliorée pour les navigateurs existants (nul besoin de javascript ou de polyfill).
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 format 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 compression de la palette en 12 couleurs et l’ai réduite à 1,6 Ko (!!!). Pour quelques logos, ce n’est pas grave, mais il faut montrer 40 d'entre eux .. eh bien, vous obtenez l'image.
La meilleure partie est que vous pouvez transformer un fichier PNG en un fichier URI de données au format base64 et les incorporer directement dans votre feuille de style. Ceci n’est pas recommandé avec SVG, un format déjà reconnu pour ses problèmes de performances et de compatibilité, en particulier sur les navigateurs mobiles.
En conclusion, je dois dire qu'il existe des points forts et des cas d'utilisation pour les deux, mais la PNG a tracé beaucoup plus de pistes et vous rencontrez moins de résistance lorsque vous suivez le courant. Pour les cas étranges où SVG fait un meilleur ajustement, je recommande fortement cet article et cette ressource d'apprentissage
Bonne conception!
C'est vrai, png est utilisé presque partout. Je pense que c’est parce que le format SVG, dans la plupart des cas, est plutôt inutile, l’image doit être plus grande (je pense) et l’ordinateur doit régénérer l’image chaque fois que vous l’agrandissez (car vous zoomez toujours sur les images, ne vous ?) Je pense que c'est la raison la plus importante.
Notons que performancewise SVG peut devenir horrible. Même sur les navigateurs modernes, comme Chrome (écrit en 2019!), Une page de type CMS avec quelques centaines (pratiquement 3 à 800) icônes svg suspend littéralement le navigateur pendant plus de 5 secondes pour terminer le rendu.
Comme indiqué ailleurs, le nombre de SVG incorporés dans la page de manière expontentielle augmente la charge de travail du navigateur. Si vous rencontrez de telles situations,
Option n ° 1: convertir les svgs en webfont (voir le tableau des performances ici: http://frozeman.de/blog/2013/08/why-is-svg-so-slow/ )
Option n ° 2: retomber dans les anciens PNG ordinaires
Dans de telles situations où vous ne voudrez plus jamais faire une modification de couleur à la volée et que vous avez BEAUCOUP d'instances SVG, l'ancien PNG fait le travail et sauve la journée!