SVG vs PNG : quelles sont les différences et quand les utiliser
Publié: 2021-12-15Il existe des dizaines de types de fichiers image, chacun variant en fonction du type de compression, du formatage et de la prise en charge du navigateur. Mais deux des plus couramment utilisés sont les formats SVG et PNG.
Ces deux types de fichiers ne pourraient pas être plus différents - chacun est mieux adapté à des situations spécifiques. Ils ne sont certainement pas interchangeables à tous égards, mais vous constaterez peut-être que les SVG peuvent effectuer des tâches spécifiques mieux que l'image PNG standard.
Apprenez la différence entre SVG et PNG et où ils sont le mieux appliqués sur votre site Web.
Qu'est-ce que le SVG ?
SVG signifie Scalable Vector Graphics, et c'est le format de fichier vectoriel le plus largement utilisé sur le Web. Décomposons cela :
- Évolutif : les SVG peuvent être redimensionnés vers le haut ou vers le bas sans endommager la qualité de l'image. Il sera parfaitement net et clair, peu importe sa taille.
- Vecteur : la plupart des types de fichiers image contiennent des pixels. Les vecteurs sont essentiellement des morceaux de code qui rendent une image en temps réel, en la convertissant en pixels que vous voyez sur votre écran. Alors qu'ils affichent la même image, ce qui se passe en arrière-plan est très différent.
- Graphiques : bien qu'il ne soit pas aussi connu, SVG est un type de fichier image comme PNG, JPEG ou GIF. Il aborde simplement les choses un peu différemment.
Les vecteurs sont des morceaux de code écrits en XML qui représentent des formes, des lignes et des couleurs pour expliquer comment cela fonctionne.
Bien que créer une image avec rien d'autre que du code soit tout à fait possible, la plupart des gens utilisent un éditeur de graphiques vectoriels comme Inkscape ou Adobe Illustrator. Vous pouvez également convertir des PNG ou d'autres images raster en SVG, mais les résultats ne sont pas toujours excellents.

Lorsque la page se charge, ce code est converti en graphique, vous ne pouvez donc pas distinguer immédiatement un SVG d'un PNG. Mais parce que les SVG sont simplement des lignes de code converties en pixels, cela signifie qu'ils peuvent s'adapter à n'importe quelle résolution - grande ou petite - sans perte de qualité.

SVG prend également en charge l'animation et la transparence, ce qui en fait un format de fichier polyvalent.
Le seul problème est qu'il n'est pas aussi largement utilisé que les formats plus standard comme PNG, il est donc moins pris en charge sur les anciens navigateurs et appareils, et ce n'est pas toujours le plus facile de le télécharger sur votre site et de l'afficher correctement.
Avantages et inconvénients du SVG
Bien qu'ils ne soient pas encore aussi largement utilisés que les types de fichiers raster tels que PNG, les graphiques vectoriels gagnent rapidement en popularité. Ils effectuent certaines tâches essentielles que les images raster ne peuvent tout simplement pas effectuer. Voici pourquoi les gens aiment les SVG.
- Les images SVG sont évolutives. Vous pouvez le concevoir à n'importe quelle résolution, et il augmentera ou diminuera sa taille sans endommager la qualité ni devenir pixélisé. Avec les images raster, vous devez savoir quelle taille vous voulez dès le début, sinon vous risquez de rendre l'image trop grande ou trop petite.
- Les SVG ont toujours l'air nets et beaux car ils ne subissent jamais de perte de qualité. Les images raster peuvent commencer à paraître floues même si elles sont légèrement redimensionnées.
- Comme les SVG ne sont que du code, leur taille de fichier est minimale et bien optimisée. Des optimiseurs SVG existent également pour les rendre encore plus gérables. Votre site se chargera probablement un peu plus rapidement si vous les utilisez à la place.
- Contrairement aux PNG, les SVG prennent en charge l'animation.
SVG a un peu sur PNG, d'être évolutif à une taille plus petite, mais ce n'est pas mieux dans toutes les situations. Voici le mauvais des types de fichiers vectoriels.
- Bien que les SVG soient pris en charge sur tous les principaux navigateurs modernes, vous pouvez rencontrer des problèmes de compatibilité en les rendant sur les anciens navigateurs et appareils. Si une partie importante de vos visiteurs les utilise, le basculement pourrait être une mauvaise idée.
- Les SVG sont plus difficiles à utiliser, nécessitant des programmes spéciaux pour créer et éditer. Bien que vous puissiez les concevoir avec rien d'autre que du XML, ce n'est pas toujours faisable. Les outils premium comme Adobe Illustrator peuvent être coûteux.
- Les SVG ne sont pas aussi faciles à intégrer que les PNG. Si vous utilisez WordPress, il n'est pas pris en charge par la bibliothèque multimédia par défaut, vous aurez donc besoin d'un plugin pour les télécharger.
- Les SVG doivent être rendus par le navigateur lorsque la page est chargée, donc en utiliser un excès ou un gros fichier avec de nombreux vecteurs peut surcharger l'appareil.
Quand utiliser SVG plutôt que PNG
Bien que vous ne devriez certainement pas convertir tous vos PNG en SVG, les graphiques vectoriels peuvent constituer un excellent remplacement pour certaines images.
Les images SVG fonctionnent exceptionnellement pour les graphiques décoratifs de sites Web, les logos, les icônes, les graphiques et les diagrammes, et d'autres images simples. Consultez notre page d'accueil pour un excellent exemple d'illustration vectorielle en action.

Cependant, ils ne fonctionnent pas aussi bien avec des images complexes impliquant de nombreuses couleurs et formes, telles que des captures d'écran, des photographies et même des illustrations détaillées. Bien qu'il soit possible de convertir n'importe quelle image en SVG, les navigateurs ne gèrent pas toujours bien les vecteurs complexes avec des centaines de couleurs car ils doivent être rendus lors du chargement de la page.
De plus, les illustrations SVG peuvent être belles, mais la conception d'images complexes nécessite beaucoup de temps, d'efforts et de maîtrise des outils d'édition avancés. Restez simple si vous souhaitez créer vos images vectorielles.
Si vous avez des images détaillées, restez définitivement avec PNG.
Cependant, les SVG sont meilleurs pour une conception Web réactive et prête pour la rétine en raison de leur évolutivité et de l'absence de dégradation de la qualité. De plus, ils prennent en charge l'animation alors que PNG ne le fait pas, et les types de fichiers raster qui prennent en charge l'animation comme GIF, APNG et WebP ont tous leurs problèmes.
Pour les graphiques simples qui peuvent nécessiter une animation et dont la mise à l'échelle est garantie sur n'importe quelle taille d'écran, utilisez SVG.
Qu'est-ce que le PNG ?
PNG signifie Portable Network Graphics, et ce nom se reflète dans la diffusion de ce type de fichier. Quiconque a déjà utilisé un ordinateur a probablement travaillé avec des PNG, car c'est le type de fichier le plus courant sur Internet après JPEG.
PNG est un type de fichier d'image raster, similaire aux formats d'image les plus courants. Cela signifie qu'il se compose de pixels, les mêmes petits points affichés sur votre moniteur ou votre écran. Bien que cela facilite l'affichage, cela signifie également que la qualité de l'image dépend de la résolution - du nombre de pixels dans l'image.
Ainsi, si vous augmentez ou diminuez la taille d'une image raster, la qualité en sera affectée. Parfois, les dégâts sont négligeables, en particulier lors de la réduction, et parfois cela peut rendre une image floue et complètement inutilisable.

Pourtant, la prévalence de PNG en fait un bon candidat pour une utilisation générale. Ce type de fichier prend en charge la transparence, mais pas l'animation.
Avantages et inconvénients du PNG
Qu'est-ce qui fait du PNG le format de fichier image le plus utilisé en ligne ? Voici les avantages :
- Les fichiers PNG sont facilement modifiables et ouverts dans n'importe quel outil d'édition d'image courant. Il n'est pas nécessaire de payer pour des programmes avancés pour créer ou modifier une image PNG ; tout au plus, vous devrez peut-être télécharger un éditeur gratuit comme GIMP.
- Que vous codiez à partir de zéro ou que vous utilisiez le gestionnaire de médias WordPress, afficher des images PNG sur votre site est une tâche simple.
- PNG utilise une compression sans perte qui lui donne un aspect plus net que les JPEG à compression avec perte. Cependant, cela a un coût de taille de fichier plus important et ne peut pas être comparé aux images vectorielles.
D'autre part, le format PNG a été créé il y a des décennies et présente plusieurs défauts notables qui n'ont pas été mis à jour pour l'ère moderne.
- Vous ne pouvez pas redimensionner les fichiers PNG sans perdre en qualité. Vous devez planifier soigneusement lors de la conception de graphiques raster et vous assurer qu'ils sont de la bonne taille, sinon vous risquez de perdre du temps à créer des images inutilisables.
- Les PNG sont très volumineux en raison de leur compression sans perte. Ainsi, ils peuvent ralentir votre site Web. Pour résoudre ce problème, il faut le compresser encore plus et nuire à la qualité.
- Rendre les images « prêtes pour la rétine » est plus fastidieux avec les PNG et plus susceptible de provoquer un flou.
- Le PNG ne prend pas en charge les animations. D'autres types de fichiers raster animés comme les GIF peuvent avoir de sérieux problèmes ; par exemple, les GIF sont de très mauvaise qualité et ne prennent en charge que 256 couleurs.
Quand utiliser PNG plutôt que SVG
PNG est le type de fichier le plus courant pour une raison ; il est très polyvalent et s'adapte à presque toutes les situations. Il n'y a que quelques défauts à prendre en compte lors de son utilisation, comme leur grande taille de fichier et leur manque d'évolutivité.
Les PNG conviennent à l'affichage d'images détaillées, d'illustrations et de photographies - tout ce qu'une image vectorielle ne peut pas gérer. Tout ce qui a des centaines de couleurs et une grande résolution devrait probablement être un PNG.
Cela ne veut pas dire que vous ne pouvez pas utiliser les PNG pour des images plus simples comme les logos et les graphiques décoratifs, mais les SVG seraient mieux adaptés à la tâche.
Besoin d'une solution d'hébergement qui vous donne un avantage concurrentiel ? Kinsta vous couvre avec une vitesse incroyable, une sécurité de pointe et une mise à l'échelle automatique. Découvrez nos forfaits
Lorsque vous n'êtes pas sûr qu'une plate-forme gère le type de fichier SVG plus récent et moins pris en charge, PNG est la solution, ne serait-ce que pour être sûr.
Par exemple, vous ne pouvez pas télécharger de SVG sur la plupart des réseaux sociaux. Et comme certains clients de messagerie peuvent avoir du mal avec les vecteurs, il est généralement recommandé de s'en tenir aux PNG dans les modèles de courrier électronique.
En général, les PNG fonctionnent bien avec toutes les images complexes et non animées, en particulier celles qui nécessitent de la transparence. Vous pouvez l'utiliser à peu près n'importe où; c'est juste que parfois un SVG serait mieux adapté.
N'oubliez pas que vous pouvez toujours utiliser des alternatives PNG si votre SVG ne se charge pas, il est donc généralement prudent d'utiliser des vecteurs même si une partie importante de votre base d'utilisateurs est restée bloquée avec des appareils ou des navigateurs plus anciens.
Quel est le meilleur : SVG ou PNG ?
Aucun type de fichier n'est meilleur ou pire que l'autre ; chacun a ses limites. Bien que SVG surpasse PNG dans plusieurs domaines, PNG est bien meilleur pour gérer certaines choses.
En général, cependant, vous devez vous en tenir aux SVG chaque fois que cela est approprié et utiliser les PNG dans toutes les autres situations que les vecteurs ne peuvent pas gérer. Vous pouvez techniquement être en mesure d'utiliser l'un ou l'autre dans ces cas, mais SVG est préférable dans quelques domaines spécifiques.
Alors que SVG prend en charge l'animation, PNG ne le fait pas. Les types de fichiers raster tels que GIF et APNG peuvent être considérés comme des alternatives. Pourtant, il n'existe pas de format raster animé parfait largement pris en charge, bien connu, de haute qualité et produisant des fichiers de petite taille. Les SVG satisfont toutes ces niches.
Les SVG s'adaptent également parfaitement à n'importe quelle taille d'écran, ce qui les rend réactifs et prêts pour la rétine par défaut. Les PNG perdent en qualité lorsqu'ils sont redimensionnés, et les mettre à l'échelle est un problème, surtout si vous n'avez que de petites images qui ne s'afficheront pas bien sur de grands écrans.
Enfin, les SVG sont généralement plus petits que les PNG, ils sont donc moins éprouvants pour votre serveur malgré la nécessité d'effectuer un rendu au chargement.
Utilisez-les pour des illustrations simples et plates, des logos et des graphiques décoratifs sur votre site.
D'autre part, les PNG conviennent à l'affichage de graphiques complexes à grande résolution ou d'images avec des milliers de couleurs. Les SVG ne peuvent pas gérer cette quantité de couleurs et de formes pour le moment.
Ce type d'images complexes constitue souvent la majorité des images de votre site, il n'est donc pas encore temps de jeter PNG.
Et les PNG sont plus largement pris en charge sur les navigateurs et les plates-formes spécifiques comme les clients de messagerie. Si vous n'êtes pas sûr qu'un SVG s'affichera correctement, faites preuve de prudence et utilisez un PNG.
tweeter
Résumé
SVG et PNG sont deux formats de fichiers très différents. En fin de compte, ce n'est pas grave si vous utilisez des PNG ou des JPEG sur votre site en dehors de cas d'utilisation très spécifiques, mais choisir entre SVG et PNG est un choix beaucoup plus important.
Vous êtes beaucoup plus susceptible d'utiliser les PNG car il s'agit d'un format de fichier plus simple, plus facile d'accès et plus polyvalent. Les images complexes telles que les captures d'écran et les illustrations détaillées doivent utiliser PNG.
Bien que les SVG soient plus difficiles à créer et à modifier, ils présentent de nombreux avantages par rapport aux PNG. Chaque fois qu'il est approprié d'utiliser des images vectorielles, telles que des graphiques décoratifs et des logos, utilisez définitivement SVG.
Vous ne remplacerez probablement pas chaque image de votre site par un SVG, mais leur réactivité et leur taille de fichier plus petite en font un excellent candidat dans certaines situations.
Êtes-vous un gang SVG ou PNG ? S'il vous plaît partagez vos opinions avec notre communauté dans les commentaires ci-dessous!