Le SVG stocke une image sous forme d'instructions de dessin : il s'adapte à toutes les tailles sans perdre en netteté. Le PNG stocke une grille fixe de pixels : il s'affiche partout de la même façon, mais ne peut pas grandir sans s'adoucir.
Utilisez le SVG pour les logos, icônes et illustrations simples qui doivent changer d'échelle. Utilisez le PNG quand il vous faut une simple image qui fonctionne dans toutes les applications, ou quand l'image est une capture d'écran ou une photo.
Sur cette page
À retenir
- Le SVG est vectoriel : net à toutes les tailles et généralement très léger pour les graphiques simples.
- Le PNG est matriciel : pixels fixes, sans perte et reconnu par pratiquement tous les logiciels.
- Les deux peuvent avoir un fond transparent.
- Gardez le SVG comme fichier maître et exportez des PNG pour les endroits qui n'affichent pas le SVG.
Comment fonctionnent les deux formats
Un fichier SVG est du texte. Il dit par exemple : dessine un cercle ici, remplis ce tracé de telle couleur. À l'affichage, le navigateur dessine les formes à la taille nécessaire : un logo est aussi net sur un téléphone que sur un panneau d'affichage.
Un fichier PNG est un tableau de pixels colorés compressé sans perte. Il ne sait pas ce que contient l'image, seulement la couleur de chaque pixel. Agrandissez-le et le logiciel doit deviner de nouveaux pixels : c'est ce qui rend flous les images matricielles agrandies.
SVG et PNG côte à côte
| SVG | PNG | |
|---|---|---|
| Type | Vectoriel (formes et tracés) | Matriciel (pixels) |
| Mise à l'échelle | Net à toutes les tailles | Taille fixe, s'adoucit à l'agrandissement |
| Poids | Très léger pour les graphiques simples, lourd pour les visuels complexes | Augmente avec le nombre de pixels |
| Transparence | Oui | Oui |
| Photos | Inadapté | Possible, mais fichiers lourds |
| Retouche | Dans un éditeur de texte ou vectoriel | Dans un éditeur d'images |
| Texte | Peut rester du texte modifiable ou devenir des contours | Devient des pixels |
| Compatibilité | Navigateurs et outils de création ; inégale dans certaines applications | Pratiquement partout |
Quand le SVG est le meilleur choix
- Les logos et icônes affichés à de nombreuses tailles, comme dans une barre de navigation, comme source de favicon ou dans un fichier d'impression.
- Les illustrations et graphiques simples faits de traits, de formes et d'aplats de couleur.
- Les sites web, où un petit SVG se charge vite et reste net sur les écrans haute densité.
- Les visuels que vous retoucherez peut-être, car formes et couleurs se modifient sans tout redessiner.
Quand le PNG est le meilleur choix
- Les captures d'écran, qui sont des pixels dès le départ.
- Les envois sur des plateformes qui refusent le SVG, dont beaucoup de formulaires de profil, de boutique et de publicité.
- Les e-mails et documents bureautiques, où l'affichage du SVG est inégal.
- Les images contenant des photos ou des ombrages doux, qu'un vectoriel ne décrit pas efficacement.
- Les livrables finaux qui doivent s'afficher à l'identique dans toutes les visionneuses, avec le texte figé en pixels.
Une méthode qui utilise les deux
- Concevez et conservez le logo en SVG.
- Indiquez une largeur et une hauteur généreuses dans le SVG, par exemple 1024 pixels, pour des exports nets.
- Convertissez-le avec SVG en PNG chaque fois qu'un formulaire ou une application demande une image matricielle.
- Si la destination exige un autre format, SVG en JPG remplit le fond transparent de blanc.
Et le JPG ?
Le JPG est le troisième choix courant, idéal pour les photos. Il ne peut pas stocker de transparence. La comparaison SVG ou JPG traite ce duo, et le guide SVG en PNG montre les étapes de conversion.
SVG ou PNG : FAQ
Quelle est la principale différence entre SVG et PNG ?
Le SVG est un format vectoriel fait de formes qui changent d'échelle sans perte. Le PNG est une image matricielle avec un nombre fixe de pixels.
Lequel est le meilleur pour les logos ?
Le SVG, car il reste net à toutes les tailles. Gardez un export PNG pour les endroits qui ne peuvent pas utiliser le SVG.
Le SVG est-il plus léger que le PNG ?
Généralement pour les graphiques simples. Pour les images détaillées ou photographiques, un SVG peut être plus lourd qu'un PNG.
Les deux gèrent-ils la transparence ?
Oui.
Puis-je convertir un PNG en SVG ?
Un convertisseur peut vectoriser un PNG en formes, mais il ne retrouve pas le vectoriel d'origine. Gardez la source SVG.
Pourquoi certains sites refusent-ils le SVG ?
Le SVG peut contenir des scripts et il est traité différemment selon les logiciels : certaines plateformes n'acceptent donc que les formats matriciels.
Convertir un SVG en PNG fait-il perdre de la qualité ?
Le PNG est aussi net que la taille en pixels choisie, mais il ne pourra pas être agrandi proprement plus tard.
Lequel utiliser pour un favicon ?
Beaucoup de sites fournissent un SVG avec des PNG de secours. Vérifiez ce que votre plateforme prend en charge.
Choisissez selon la destination de l'image
Le SVG pour tout ce qui doit changer d'échelle ou être retouché, le PNG pour les endroits qui demandent une simple image. Gardez le SVG et exportez le PNG quand on vous le demande.
