Vous cherchez une recherche: les polices PNG Sprite vs SVG Sprite vs Icon
Nous utilisons actuellement des PNG dans la production d'icônes, mais en tant que concepteur, j'essaie de pousser pour utiliser des SVG au profit de:
une. Rendu sur la rétine.
b. Utilisateurs malvoyants qui zooment.
c. Un workflow plus simple lors de la création d'icônes.
Y a-t-il des recherches qui comparent les 3 méthodes? (Les polices PNG Sprite vs SVG Sprite vs Icon) en termes de performances?
Sinon, quoi et comment les compareriez-vous? (Par exemple, j'ai entendu dire que SVG nécessite plus de puissance CPU, et je ne sais pas comment le tester ni quelles sont les conséquences).
Merci beaucoup! Vous êtes une communauté incroyable.
BTW, c'est ce que j'ai pu trouver:
les svgs sont sympas, mais les polices d'icônes ne représentent que 10% de la taille de leur fichier
SVG + polices d'icônes:
Iconserving - SVG ou Webfont?
Dix raisons pour lesquelles nous sommes passés d'une police d'icônes à SVG
Pas une réponse mais elle ne sera pas lisible dans les commentaires
les PNG sont des images tramées
Donc, pour le rendu, il suffit de les décompresser, ce qui nécessite de la puissance CPU, mais ce n'est pas si mal aujourd'hui.
les SVG sont des fichiers XML vectoriels
Cela signifie que vous devez:
- lire XML texte
- le décoder en un moteur/classe capable de graphisme vectoriel
- rendre l'image basée sur les graphiques vectoriels
Compliqué SVG (> 300MB vector utf-8) ont des temps de chargement/décodage/rendu même en minutes sur des machines rapides (si tout est décodé). Si vous décodez uniquement les bases, vous pouvez faire de même en quelques secondes, mais vous avez perdu les fonctionnalités avancées.
Beaucoup ne seront pas d'accord avec ceci: "le problème est qu'il n'y a pas une seule bibliothèque SVG 100% compatible facile à implémenter ... du moins que je sache" mais gardez à l'esprit que je n'utilise pas de cadres ou d'environnements pour WEB comme Java ou PHP ... Aussi chaque lib SVG a ses propres caprices. Si vous comparez rendu SVG entre différents visualiseurs Web ou d'images, ce n'est pas la même chose et de nombreuses fonctionnalités ne sont pas prises en charge partout.
Vous pouvez coder votre propre décodeur SVG mais c'est un peu compliqué. Si vous voulez juste des fonctionnalités de base comme path et des formes sans animations ni dégradés, alors c'est relativement facile à faire, mais si vous voulez implémenter tout ce que vous feriez passez beaucoup de temps avec ça .
Pendant un certain temps, j'ai eu un gros problème pour trouver un bon éditeur gratuit SVG . Le seul "utilisable" que j'ai trouvé était Inkspace mais il est lent et peu convivial à mon goût. D'un autre côté, il peut ouvrir presque tous les types de SVG J'utilise de la bonne manière ...
[Notes]
Si vous souhaitez utiliser SVG pour les icônes, je recommande fortement de les rendre en raster au démarrage de l'application, puis d'utiliser uniquement des images raster comme les bitmaps de la mémoire pour éviter problèmes de performances.