PNG vs SVG : quelle est la différence ?
Le PNG et le SVG sont deux formats d'image très répandus sur le web, mais ils stockent une image de façon fondamentalement différente. Comprendre cette différence vous aide à choisir le bon format pour un logo, une icône, une photo ou un fichier de découpe.
Qu'est-ce qu'un fichier PNG ?
Un fichier PNG (Portable Network Graphics) est une image matricielle (« raster ») : une grille fixe de pixels colorés, comme un JPEG. Chaque pixel stocke sa propre valeur de couleur, et le nombre total de pixels est fixé au moment de la création du fichier. Le PNG gère aussi une véritable transparence alpha, ce qui en fait le format standard pour les icônes, les captures d'écran et les logos à arrière-plan transparent.
Comme un PNG n'est qu'une grille de pixels, l'agrandir revient à étirer ces mêmes pixels sur une surface plus grande — c'est exactement ce qui provoque le flou ou l'effet « pixelisé » visible lorsqu'on agrandit un PNG au-delà de ses dimensions d'origine.
Qu'est-ce qu'un fichier SVG ?
Un fichier SVG (Scalable Vector Graphics) décrit une image comme un ensemble de formes et de tracés mathématiques — lignes, courbes et remplissages — plutôt que des pixels individuels. Un cercle est stocké comme « un cercle de tel rayon », et non comme des milliers de points colorés individuels.
C'est ce qui rend les SVG redimensionnables à l'infini : un navigateur ou un logiciel de design redessine les formes à la volée, quelle que soit la taille souhaitée, si bien qu'un logo SVG reste tout aussi net sur l'icône d'un téléphone que sur un panneau publicitaire. Les SVG sont également du texte brut (XML), donc modifiables dans n'importe quel éditeur de texte ou logiciel de design vectoriel.
PNG vs SVG : les différences clés
| PNG | SVG | |
|---|---|---|
| Données sous-jacentes | Grille de pixels | Tracés et formes mathématiques |
| Redimensionnement | Perd en qualité au-delà de la taille d'origine | S'adapte à toute taille sans perte de qualité |
| Poids du fichier | Plus lourd pour des graphismes simples | Généralement plus léger pour logos/icônes |
| Modifiabilité | Édition pixel uniquement (Photoshop, etc.) | Formes directement modifiables (Illustrator, Inkscape) |
| Transparence | Prise en charge (canal alpha) | Prise en charge (remplissage/opacité) |
| Idéal pour | Photographies, textures complexes | Logos, icônes, illustrations, fichiers de découpe |
Quand utiliser le PNG plutôt que le SVG (et inversement)
Voici une règle simple :
- Utilisez le SVG pour les logos, icônes, dessins au trait et tout ce qui doit être redimensionné ou découpé — y compris les fichiers pour projets Cricut et découpeuses laser.
- Utilisez le PNG pour les photographies et les images avec des dégradés ou textures complexes qui se prêtent mal à des formes simples.
- Si vous avez déjà un logo ou une icône en PNG et avez besoin d'un SVG, inutile de le redessiner à la main : vous pouvez le vectoriser automatiquement. Découvrez comment fonctionne la vectorisation d'image pour tous les détails.
Questions fréquentes
Puis-je simplement renommer un fichier PNG en .svg ?
Non. Changer l'extension du fichier ne change rien aux données sous-jacentes — la grille de pixels d'un PNG doit être vectorisée en tracés pour devenir un véritable SVG.
Le SVG est-il toujours meilleur que le PNG ?
Pas pour tous les usages. Le SVG est préférable pour les graphismes redimensionnables comme les logos et icônes, mais le PNG (ou le JPEG) reste le bon choix pour les photographies, où une vectorisation ferait perdre du détail réaliste.
Les navigateurs gèrent-ils le SVG de la même façon que le PNG ?
Oui. Tous les navigateurs modernes affichent le SVG nativement, et il peut être utilisé partout où une balise <img> ou une image d'arrière-plan CSS fonctionne.
Guides associés
Un regard plus approfondi sur la distinction raster/vecteur, au-delà du seul PNG et SVG.
Transformez un design PNG en SVG prêt à découper pour Cricut Design Space.