SVG vs PNG : images vectorielles vs matricielles expliquées en détail

Le SVG et le PNG résolvent des problèmes fondamentalement différents. Le SVG stocke les images sous forme de formes mathématiques qui s'adaptent à toute taille sans jamais perdre en qualité. Le PNG stocke les images comme une grille de pixels colorés. Choisir le mauvais format coûte en performance ou en qualité visuelle.

Ce qui différencie fondamentalement SVG et PNG

La différence entre SVG et PNG reflète la distinction plus large entre graphiques vectoriels et matriciels.

Le SVG (Scalable Vector Graphics) est un format basé sur XML qui décrit les images à l'aide de définitions mathématiques de formes, lignes, courbes et couleurs. Lorsque vous zoomez dans un SVG, le navigateur recalcule et redessine chaque forme à la nouvelle taille. Le résultat est toujours net, qu'il soit affiché comme un favicon de 16 px ou un panneau de 16 000 px.

Le PNG (Portable Network Graphics) est un format matriciel qui stocke les images comme une grille de pixels, chacun avec une valeur de couleur spécifique. L'image a une résolution fixe. Agrandissez-la au-delà de ses dimensions natives, et elle devient floue et pixelisée. Réduisez-la, et vous téléchargez plus de données que nécessaire.

Quand le SVG est le meilleur choix

Le SVG excelle pour tout graphique créé à l'origine en tant qu'illustration vectorielle. Utilisez le SVG pour :

• Logos — un logo doit être net à toutes les tailles, de l'icône de 32 px dans l'onglet du navigateur à la bannière pleine largeur. Le SVG gère cela avec un seul fichier. Avec PNG, vous auriez besoin de plusieurs résolutions.
• Icônes — icônes d'interface, de navigation, de réseaux sociaux. Un exemple concret : un site e-commerce avec 50 icônes de catégorie totalisant 1,2 Mo en PNG réduit à seulement 95 Ko après le passage au SVG.
• Illustrations et diagrammes — diagrammes techniques, organigrammes, cartes et infographies avec des lignes nettes et des couleurs plates. Le SVG conserve le texte sélectionnable et indexable.
• Animations — les éléments SVG peuvent être animés avec CSS ou JavaScript, permettant des indicateurs de chargement légers, des micro-interactions et des graphiques interactifs sans fichiers vidéo.
• Favicons — les navigateurs modernes prennent en charge les favicons SVG, qui s'affichent nettement à n'importe quelle densité d'écran. Vous pouvez générer des favicons depuis n'importe quelle image avec notre Générateur de favicon.

Selon W3Techs, 65,5 % de tous les sites web utilisent désormais le SVG, ce qui en fait le troisième format d'image le plus courant après PNG et JPEG. Son adoption a progressé d'environ 8 % par an, portée par les besoins de conception responsive et les avantages de performance.

Quand le PNG est le meilleur choix

Le PNG est le bon choix lorsque les détails au niveau du pixel comptent ou que le contenu de l'image est intrinsèquement matriciel :

• Photographies avec transparence — découpes de produits sur fonds transparents, compositions photo en couches. Le PNG prend en charge la transparence alpha complète tout en préservant les détails photographiques.
• Captures d'écran — les captures d'écran contiennent des éléments d'interface précis au pixel, du texte anti-aliasé et des dégradés subtils intrinsèquement matriciels. Le PNG les préserve exactement.
• Illustrations complexes avec de nombreuses couleurs — peintures numériques détaillées, textures et illustrations photoréalistes qui ne se simplifient pas en formes vectorielles propres.
• Graphiques matriciels avec texte superposé — quand vous avez besoin d'un rendu précis au pixel de contenus photo et texte combinés.

Taille de fichier et performances

Pour les types de graphiques que le SVG gère bien (icônes, logos, illustrations simples), les économies de taille de fichier sont spectaculaires :

Les fichiers SVG se compriment aussi exceptionnellement bien avec Gzip ou Brotli (standard sur la plupart des serveurs web), rétrécissant souvent de 50-70 % supplémentaires lors du transfert. Un SVG de 20 Ko peut ne transiter que comme 6-8 Ko sur le réseau.

SVG vs PNG : comparaison rapide

Comment convertir entre SVG et PNG

Vous pouvez convertir entre ces formats directement dans votre navigateur — sans téléchargement vers un serveur, sans logiciel à installer. Vizua traite chaque fichier localement sur votre appareil :

• SVG en PNG — rastérisez les fichiers SVG à la résolution dont vous avez besoin
• Vectoriser image — convertissez des images matricielles (PNG, JPEG) en format vectoriel SVG
• Générateur de favicon — créez des fichiers favicon à partir de n'importe quelle image, avec sortie SVG pour les navigateurs modernes

Pour un aperçu plus large du choix du bon format pour chaque image de votre site, notre guide des tailles de fichiers image liste les dimensions et formats recommandés par cas d'usage.

Questions fréquentes