PNG ou SVG : lequel choisir ?

1. La différence essentielle : grille de pixels contre tracés mathématiques

Un PNG est une image matricielle : il découpe l'image en pixels et enregistre la couleur de chacun. Agrandir un PNG revient en substance à étirer les pixels, d'où les dentelures et le flou. Un SVG est une image vectorielle : il décrit les formes par des instructions mathématiques comme les coordonnées et les courbes de Bézier, et le navigateur redessine le graphique à la nouvelle taille, si bien qu'il reste net à toute échelle. Tout l'écart entre les deux formats découle de cette seule réalité.

Côté transparence, le PNG gère un canal alpha et peut conserver un fond transparent. Le SVG est transparent par nature : tant que vous ne dessinez pas de rectangle de fond, tout ce qui entoure le graphique reste transparent. À noter que le JPG, lui, ignore la transparence : son fond blanc est une couleur peinte dans l'image.

2. Poids des fichiers et vitesse de chargement

Pour des graphiques simples comme les icônes ou les logos, un SVG pèse souvent quelques Ko à peine, et un seul fichier s'adapte à toutes les densités d'écran. Le PNG, lui, exige généralement des versions @2x et @3x pour rester net sur un écran Retina, ce qui multiplie le poids. Pour les photos, c'est l'inverse : les dégradés de couleur très riches produisent une multitude de tracés une fois vectorisés, si bien que le SVG finit bien plus lourd qu'un JPG ou un WEBP, sans aucun intérêt.

L'explication vient du mode de compression de chacun. Le PNG enregistre les pixels en compression sans perte : plus l'image est complexe, plus le fichier est lourd. Le SVG est du texte brut, dans lequel les instructions de tracé et les coordonnées répétées se compressent extrêmement bien. Voilà pourquoi deux formats tous deux annoncés « sans perte » se comportent si différemment en volume.

Cas d'usage	Format conseillé	Pourquoi
Icônes / logos de site	SVG	Un fichier pour toutes les résolutions, recolorable en CSS
Photographies	JPG / WEBP	Fichiers légers et fidélité photographique
Captures d'écran	PNG	Précision au pixel près, compression sans perte
Graphiques de données	SVG	Net à l'échelle, programmable et interactif
Photos de profil sur les réseaux sociaux	PNG / JPG	La plupart des plateformes n'acceptent que le matriciel

3. Quand utiliser le PNG

• Photographies, éclairages complexes et dégradés délicats ;
• Captures d'écran et instantanés d'interface exigeant une précision au pixel près ;
• Situations où la plateforme n'accepte que le matriciel, comme l'envoi d'avatar sur certains back-offices ;
• Solution de repli : les environnements très anciens qui ne gèrent pas le SVG.

4. Quand utiliser le SVG

• Icônes de site et logos : un fichier pour toutes les résolutions, toujours net sur un écran Retina ;
• Graphiques dont la couleur doit être modifiée en CSS ou JavaScript ou animés par tracé ;
• Graphiques de données : les bibliothèques de visualisation comme ECharts produisent du SVG par défaut ;
• Impression, gravure laser et découpe, où la machine lit des tracés vectoriels.

5. PNG et SVG peuvent-ils se convertir l'un en l'autre ?

Oui. PNG vers SVG : utilisez l'outil PolySVG de conversion PNG en SVG ou l'outil de conversion image en SVG, téléversez le fichier puis cliquez sur générer pour le vectoriser — le résultat est excellent pour les icônes et les logos, tandis que les photos adoptent un style illustré. La conversion est gratuite et un PNG transparent garde son fond transparent. Le SVG obtenu s'ouvre ensuite dans l'éditeur pour être recoloré ou dépouillé de son fond, ce qui boucle le flux de travail. SVG vers PNG : ouvrez le fichier dans l'éditeur SVG en ligne et exportez un PNG à la résolution de votre choix, parfait pour un document ou une image d'aperçu.

Une précision utile : la conversion PNG vers SVG n'est pas un simple enregistrement sous un autre format, c'est une vectorisation qui redessine les contours. Les visuels graphiques donnent des tracés propres, les photos sont condensées en aplats de couleur. Prévisualisez le résultat dans l'outil et vérifiez que le style vous convient avant de télécharger.

La règle en une phrase : icônes, logos et graphiques prennent le SVG ; photos et captures d'écran prennent le PNG/JPG/WEBP. Dans le doute, privilégiez le SVG pour tout ce qui est graphique. Pour aller plus loin, lisez Qu'est-ce que le SVG et Trois méthodes pour convertir une image en SVG.