SVG ou PNG : quel format choisir ?

Le même logo peut exister en deux fichiers qui semblent identiques à l’écran et se comportent de façon opposée dès qu’on change la taille d’affichage. La question SVG ou PNG n’est donc pas une question de goût : c’est une question de destination, de résolution et de droits d’édition sur le fichier livré.

L’Éditeur vectoriel exporte les deux formats, ce qui permet de comparer sans changer d’outil. Ce qui suit décrit ce que chaque sortie contient réellement, et dans quels cas l’une devient un mauvais choix.

Deux façons de stocker une image

Un SVG décrit de la géométrie : des coordonnées, des courbes, des remplissages. Il ne contient pas de grille de pixels, il contient la recette pour en produire une à la taille demandée.

Un PNG contient une grille fixe. Chaque pixel a une couleur, et le format est sans perte : ce que vous voyez est exactement ce qui est stocké, avec un canal alpha pour la transparence.

C’est toute la différence. L’un est ré-évalué à chaque affichage, l’autre est recopié tel quel.

Ce que l’agrandissement fait à chacun

Prenons un logo de 300 × 100 pixels CSS. À 1×, il occupe 30 000 pixels. À 2×, 120 000. À 3×, 270 000. Un PNG doit fournir trois fichiers, ou un seul qui sera agrandi et perdra en netteté sur les grands écrans.

Un seul SVG couvre les trois cas. Le navigateur le rend à la résolution de l’écran, sans interpolation. Le fichier, lui, ne change pas d’un octet.

L’inverse est vrai aussi. Réduire un PNG ne le dégrade pas, mais un PNG de 2 400 × 2 400 en RVBA représente 5,76 millions de pixels, soit environ 23 Mo de données brutes avant compression. Sur un site, ce poids se paie en bande passante.

Là où le PNG reste meilleur

Trois situations plaident clairement pour le PNG.

Une photographie, ou tout contenu à dégradés fins et à bruit. Un SVG ne sait pas décrire une photo : il l’intègre comme image matricielle, et le fichier devient une enveloppe autour d’un PNG.

Un rendu qui doit être strictement identique partout, sans dépendre des polices ni du moteur graphique. Le PNG ne change pas d’aspect selon le navigateur.

Une capture d’écran, une texture ou un motif pixelisé, où la grille est justement le sujet.

Le poids ne départage pas toujours

Un SVG peut être plus lourd qu’un PNG, surtout s’il contient des milliers de nœuds ou une image intégrée. La compression ne change pas ce fait : un SVG peut être compressé en gzip ou en Brotli pendant le transport, et son rendu reste identique. Mais un fichier mal construit reste gros, même compressé.

Le bon réflexe est donc de regarder le contenu avant de regarder l’extension. Un SVG de logo simple pèse quelques kilo-octets ; un SVG de carte détaillée peut dépasser plusieurs centaines de kilo-octets.

Une seule nuance, mais elle compte

Un SVG peut embarquer une photo. Le fichier est alors partiellement vectoriel : les formes et le texte restent nets à toute taille, la photo non. Cette distinction importe quand on promet un visuel « vectoriel » à un client.

À l’inverse, il n’existe pas de conversion magique d’un PNG vers le SVG. Passer d’une grille de pixels à des tracés s’appelle un tracé automatique : le résultat approxime les contours, il ne les retrouve pas. Aucun standard ne définit cette transformation comme réversible.

La règle de décision

Si l’élément est un logo, une icône, un schéma ou un texte mis en forme, exportez en SVG : il servira à toutes les tailles. S’il s’agit d’une photo, d’une capture ou d’une image à dégradés complexes, le PNG reste le bon choix. Et si le destinataire doit pouvoir modifier le fichier, seul le SVG le permet vraiment.

Pour le détail des conteneurs vectoriels entre eux, SVG, AI ou EPS : quel format vectoriel choisir ? traite la question voisine. Une fois le SVG choisi, comment préparer et optimiser des fichiers SVG pour le Web s’occupe du poids réel du fichier livré.