Icônes SVG vs. icônes PNG dans les sites Web modernes
je me demande pourquoi si peu de sites Web modernes utilisent encore seulement PNGs pour les icônes (mais cette hypothèse est juste basée mon observation). Jusqu'à présent, je sais que les principales raisons pour utiliser PNGs sur SVGs sont IE8 et que SVG utilise plus de puissance CPU (mais je ne crois pas que ce soit un problème pour les icônes simples 1K). Je peux voir (et nous utilisons actuellement) de nombreux avantages dans L'utilisation de SVG, que ce soit lorsqu'il est utilisé comme sprites, comme images, ou comme SVG inline.
(Question recherche: PNG Sprite vs SVG sprite vs Icon fonts met l'accent sur la performance et n'a pas de réponse pertinente, Icon Font vs SVG caching et network concern met l'accent sur le trafic réseau, mais il est facile de le résoudre par exemple en modelant.)
si le nouveau site web ne prend en charge que les navigateurs modernes, y a - t-il une raison de ne pas utiliser SVGs (ou-y a-t-il une raison d'utiliser PNGs pour les icônes)? Si nous ne nous soucions pas de IE8 et que L'utilisation de SVG est soutenue par templating et / ou caching, y a-t-il une prise à ne compter que sur les SVG?
4 réponses
Raisons SVG peut être un bon choix:
- il prend en charge de façon transparente les navigateurs de toute taille, en particulier avec css
background-size - vous pouvez les mettre à l'échelle Haut / Bas will, comme à effet de vol stationnaire
- vous pouvez intégrer des SVG et les modifier en temps réel avec JavaScript et le DOM
- vous pouvez style SVGs et les parties de SVGs avec CSS (changer les couleurs, les contours, etc.)
- vous pouvez générer des SVG de manière dynamique, soit sur le client, soit 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:
- prise en charge du navigateur
- outillage existant pour la création 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 exposant éventuellement involontairement des données
- e.g. lorsque vous exportez un PNG dans Inkscape il a enregistré/enregistre le chemin absolu vers ce répertoire dans le SVG lorsque vous enregistrez
- les compresseurs SVG peuvent enlever ceci, mais je ne l'ai pas testé (n'hésitez pas à le modifier si vous avez)
SVG est cool (Comment FakeRainBrigand joliment décrit) et rend magnifiquement, 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 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 performance valables, mais d'un point de vue logique SVG devrait être utilisé avec soin quand il s'agit de performance, en particulier quand Gérer les navigateurs mobiles d'âge moyen (CPU-stress). Serait très utile d'avoir un graphique où vous pouvez voir la puissance CPU consommé par 100 images SVG vs 100 images PNG sur différents appareils Android et IOS ...
une autre chose de bugging avec SVG est que la balise a besoin d'un attribut de largeur et de hauteur pour certains navigateurs Android/Samsung quels que soient et notre bon vieux IE. Et la plupart des éditeurs SVG modernes comme un illustrateur**e ajoutent simplement l'attribut "viewBox".
La chose la plus cool à propos de SVG est qu'il rend agréable et croquante dans n'importe quelle densité de pixels.
il est vrai que la png est utilisée presque partout. Je pense que c'est parce que le SVG, dans la plupart des cas, est assez inutile, l'image devrait être plus grand (je pense) et l'ordinateur doit régénérer l'image à chaque fois que vous zoomez (parce que vous zoomez toujours les images, n'est-ce pas?) Je pense que c'est la raison la plus importante.
à moins que vous ne montriez des formes/conceptions très simples ou que vous ayez 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 de rétine) et avez toujours la taille de fichier être un ordre de grandeur plus petit - sans mentionner une meilleure couverture pour les navigateurs traditionnels (pas besoin de javascript ou polyfills).
je dis cela comme quelqu'un qui construit UIs avec des graphiques vectoriels. C'est un outil de conception impressionnant, mais pour la livraison / largeur de bande / portée, il est difficile de dépasser PNG. Hier soir, j'ai testé un bien connu logo. Coca-cola.svg était presque 20K. Comme c'était une couleur solide/plate, j'ai exporté en PNG-8 avec une compression de palette de 12 couleurs et je l'ai fait descendre à 1,6 K (!!!) Pour quelques les logos ce n'est pas une grosse affaire, mais quand vous avez à montrer 40 d'entre eux.. eh bien, vous obtenez l'image.
la meilleure partie est que vous pouvez transformer un PNG en uri de données base64 et les intégrer directement dans votre la feuille de style. Cela n'est pas recommandé avec SVG - un format qui est déjà célèbre pour les problèmes de performance et de compatibilité, en particulier sur les navigateurs mobiles.
pour conclure, je dois dire qu'il y a des points forts 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 quand vous allez avec le courant. Pour les cas étranges où SVG fait un meilleur ajustement, je recommande fortement cet article et cette ressource d'apprentissage
Concevoir Heureux!