SVG ou PNG : que choisir pour les logos, icônes et illustrations
Le SVG stocke des formes et le PNG des pixels, et c’est ce qui décide lequel convient. Nous avons comparé cinq SVG de complexité très différente à des copies PNG de quatre tailles, et vectorisé un logo, un sceau et une photo.
Les graphistes envoient les logos en SVG, les sites demandent du PNG, et certains logiciels n’acceptent que l’un des deux. Ce sont deux formats d’image, mais ils décrivent les images de façons totalement différentes, et c’est ce qui décide lequel convient. Nous avons comparé cinq SVG de complexité très différente à des copies PNG créées avec notre propre convertisseur.
Des formes ou des pixels
Un fichier SVG est du texte : une liste de formes comme « un cercle ici, de 3 unités de diamètre, rempli de vert ». Le navigateur ou le logiciel redessine ces formes à la taille voulue, si bien que les bords sont toujours aussi nets que l’écran le permet. Un PNG est une grille de pixels, enregistrée sans perte. Il est parfait à sa propre taille et doit être étiré, donc flouté, pour être affiché plus grand.
Le SVG est donc le format naturel de tout ce qui est fait de formes : logos, icônes, schémas, graphiques, cartes. Les photos sont faites de millions de pixels légèrement différents, sans formes à décrire : elles vont dans un format de pixels comme le JPEG, le WebP ou l’AVIF, comme nous l’avons testé dans JPG, PNG, WebP ou AVIF.
Les fichiers de test
- Icône : un appareil photo du jeu libre Lucide, deux formes.
- Logo : le logo Tooloat, trois formes.
- Drapeau : le drapeau du Brésil, 17 formes avec les lettres.
- Sceau : le grand sceau des États-Unis, une illustration détaillée de 776 formes.
- Carte du monde : une carte vierge du monde où chaque pays est une forme, 2 316 en tout.
Le drapeau, le sceau et la carte sont des fichiers du domaine public issus de Wikimedia Commons. Chaque SVG est passé par notre minificateur SVG avec ses réglages par défaut et a été converti en PNG à quatre tailles avec le convertisseur SVG en PNG.
Poids des fichiers
| Fichier | SVG | SVG minifié et compressé gzip | PNG 256 px | PNG 1024 px | PNG 1024 px optimisé |
|---|---|---|---|---|---|
| Icône | 403 o | 261 o | 7,3 Ko | 52,2 Ko | 23,9 Ko |
| Logo | 323 o | 189 o | 6,5 Ko | 46,0 Ko | 20,6 Ko |
| Drapeau | 4,1 Ko | 1,2 Ko | 9,7 Ko | 60,5 Ko | 32,5 Ko |
| Sceau | 334,5 Ko | 61,7 Ko | 83,7 Ko | 668,2 Ko | 436,6 Ko |
| Carte du monde | 1,05 Mo | 341,6 Ko | 16,8 Ko | 132,0 Ko | 55,3 Ko |
Compressés, l’icône, le logo et le drapeau étaient plus légers que même un PNG de 64 pixels, et 50 à 250 fois plus légers qu’un PNG de 1024 pixels, tout en servant toutes les tailles d’écran à la fois. C’est pourquoi les jeux d’icônes et les logos sont distribués en SVG.
Le sceau et la carte montrent la limite. Un SVG grossit avec le nombre de formes, pas avec la taille d’affichage. Le sceau reste plus léger en SVG compressé qu’en PNG de 1024 pixels, mais la carte, avec ses milliers de côtes détaillées, demande 342 Ko même compressée, six fois plus qu’un PNG optimisé de 1024 pixels. Si un dessin complexe est toujours affiché à une seule taille, un PNG ou un WebP sans perte peut être le choix le plus léger.
Netteté
La différence de poids compte moins que ce qui se passe quand une image est affichée plus grande que prévu : sur un écran de téléphone haute densité, quand quelqu’un zoome, ou quand un logo prévu pour un site finit sur une affiche.
Un SVG n’a jamais ce problème. Avec un PNG, la solution est de le créer à la plus grande taille à laquelle il sera jamais affiché, au moins deux fois sa taille d’affichage normale pour les écrans nets, et d’accepter un fichier plus lourd.
Transformer un PNG en SVG
Si vous n’avez qu’un PNG de votre logo, un outil de vectorisation peut le reconstruire en formes. Nous avons vectorisé trois PNG avec notre convertisseur PNG en SVG, avec ses préréglages :
- Le logo, 512 pixels : 6 formes dans un SVG de 1,5 Ko qui ressemble à l’original. Les aplats de couleur et les bords nets sont ce que la vectorisation fait de mieux.
- Le sceau, 1024 pixels : 943 formes et 401 Ko, plus lourd que le SVG d’origine et avec moins de détails dans les traits fins. Vectoriser une illustration fonctionne, mais un vrai original vectoriel est toujours meilleur.
- Une photo de hibou, 1000 pixels : 7 039 formes et 1,8 Mo, quatorze fois le poids d’un JPEG de 129 Ko de la même photo.
Là où le SVG ne fonctionne pas
- L’e-mail. Beaucoup d’applications de messagerie, dont certaines parmi les plus utilisées, n’affichent pas les images SVG. Utilisez du PNG dans les e-mails.
- Les envois. Les réseaux sociaux, les places de marché et beaucoup de formulaires n’acceptent que le JPEG, le PNG ou le WebP.
- Les fichiers non fiables. Un SVG peut contenir des scripts, si bien que beaucoup de sites refusent les SVG pour des raisons de sécurité. Notre minificateur retire par défaut les scripts et les gestionnaires d’événements.
- Le texte sans sa police. Le texte d’un SVG est dessiné avec les polices de l’appareil de la personne qui le regarde, sauf s’il a été converti en formes : un logo peut donc changer d’aspect ailleurs. Vectorisez le lettrage avant de partager un fichier de logo.
La réponse habituelle est de garder le SVG comme fichier maître et d’en exporter des PNG là où un format de pixels est exigé.
Lequel utiliser
| Image | Meilleur format |
|---|---|
| Logos et icônes sur les sites et dans les applications | SVG |
| Graphiques, schémas et illustrations simples | SVG |
| Dessins très détaillés affichés à une seule taille | PNG ou WebP sans perte, optimisé |
| Captures d’écran | PNG |
| Photos | JPEG, WebP ou AVIF |
| Images dans les e-mails et les envois | PNG ou JPEG |
Tous les outils utilisés ici fonctionnent dans votre navigateur : le convertisseur SVG en PNG exporte à toute taille, le minificateur SVG allège les fichiers, et le convertisseur PNG en SVG vectorise logos et dessins.
Questions et réponses
Le SVG est-il meilleur que le PNG ?
Pour les logos, icônes et graphiques simples, oui : les fichiers sont minuscules et restent nets à toute taille. Pour les photos et les dessins très détaillés, le PNG ou un autre format de pixels est généralement plus léger et mieux pris en charge.
Pourquoi mon fichier SVG est-il si lourd ?
Un SVG grossit avec le nombre de formes et de points, pas avec sa taille d’affichage. Les cartes détaillées et les images vectorisées peuvent atteindre des centaines de kilo-octets. La minification retire les données d’éditeur et les décimales inutiles ; dans notre test, elle a fait gagner environ un quart sur les fichiers complexes.
Peut-on convertir un PNG en SVG ?
Oui, avec un outil de vectorisation, et cela fonctionne bien pour les logos en aplats et le dessin au trait. Les photos deviennent une image postérisée et un fichier bien plus lourd : notre photo vectorisée pesait quatorze fois le JPEG.
Peut-on utiliser du SVG dans un e-mail ?
Pas de façon fiable. Beaucoup d’applications de messagerie n’affichent pas le SVG : utilisez un PNG créé au double de sa taille d’affichage.
Les outils de cet article
À lire aussi sur le blog
JPG, PNG, WebP ou AVIF : quel format choisir
Nous avons enregistré six photos et un graphique dans les quatre formats à la même qualité visuelle et comparé les tailles. Les formats récents l’emportent largement sur les photos, mais chacun garde son usage.
Pixels, DPI et poids : quelle taille doit faire une photo ?
Les formulaires demandent 300 DPI, les imprimeurs une haute résolution, et les téléphones font des photos de 12 mégapixels. Nous avons testé ce que fait vraiment le DPI, comment le poids suit le nombre de pixels et combien de pixels chaque usage demande.
Quel réglage de qualité JPEG choisir ?
Tout logiciel qui enregistre en JPEG demande une qualité de 0 à 100, et le rapport entre poids et qualité est loin d’être linéaire. Nous avons enregistré six photos à douze réglages et mesuré ce que change chaque palier.