Référence · 8 min de lecture
PNG ou SVG : quelle différence, et lequel choisir ?
Un PNG est une grille de pixels ; un SVG est une liste de formes. Cette seule différence décide de la netteté, du poids et de la modifiabilité de chacun. Voici ce qu’est un SVG, pourquoi un PNG n’est pas un vecteur, et quand choisir l’un ou l’autre.
01 · La réponse courte
Des pixels ou des formes
Le SVG pour un dessin qui doit s’agrandir. Le PNG pour tout ce qui est vraiment une image.
Le PNG (Portable Network Graphics) enregistre une image sous forme d’une grille fixe de pixels colorés, compressée sans perte, avec un canal de transparence facultatif. C’est un format matriciel (ou bitmap). Si vous l’agrandissez, les pixels grossissent tout simplement, ce qui se voit en flou ou en contours en escalier. Le SVG (Scalable Vector Graphics) enregistre une image sous forme d’une description de formes (« un cercle ici, cette courbe remplie de ce dégradé, ce texte ») : le logiciel d’affichage la redessine à neuf à la taille voulue. C’est un format vectoriel, qui ne devient jamais flou.
C’est pourquoi un logo vaut mieux en SVG et une photographie mieux en PNG, JPG ou WebP : un logo, ce sont vraiment quelques formes ; une photographie, ce sont vraiment des millions de points légèrement différents.
| PNG | SVG | |
|---|---|---|
| Type | Matriciel (pixels) | Vectoriel (formes), enregistré en texte XML |
| Agrandissement | Devient flou ou pixellisé | Net à toute taille |
| Poids du fichier | Augmente avec le nombre de pixels | Augmente avec la complexité ; minuscule pour les logos et les icônes |
| Photos et textures | Bon (lourd pour les photos) | Médiocre : il faut un bitmap à l’intérieur, ou cela devient une affiche |
| Transparence | Oui, canal alpha complet | Oui, native |
| Modification | Pixel par pixel dans un éditeur photo | Déplacer des points et changer des remplissages dans un logiciel de vectoriel ou un éditeur de texte |
| Style et animation | Aucun | CSS, scripts, animation lorsqu’il est intégré dans une page web |
| Compatibilité | Partout | Tous les navigateurs et outils de création actuels ; inégale dans les messageries et certains formulaires d’envoi |
02 · Qu’est-ce qu’un fichier SVG ?
Une image que l’on peut ouvrir dans un éditeur de texte
Les mots « scalable » et « vector » du sigle SVG résument toute l’idée.
Un fichier SVG est un petit document texte, dans un format normalisé par le W3C. Ouvrez-en un dans le Bloc-notes et vous trouverez quelque chose comme ceci, qui est une image complète et valide :
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="#8B5CF6"/>
</svg>Comme c’est du texte, un SVG peut être modifié à la main, indexé par la recherche, bien compressé par un serveur web, produit par un script et suivi dans un gestionnaire de versions. Comme il décrit des formes, il gère de vrais dégradés, la transparence partielle, le détourage, le texte et, lorsqu’il est placé directement dans une page web, la mise en forme en CSS et l’animation. Un logo de 40 Ko en PNG à 1 000 pixels ne pèse souvent que quelques kilo-octets en SVG.
Deux remarques pratiques. D’abord, un SVG peut contenir un script : ouvrez donc les fichiers de sources de confiance comme n’importe quel document ; les navigateurs n’exécutent pas les scripts d’un SVG chargé par une balise <img>. Ensuite, un SVG peut incorporer un bitmap ; un tel fichier n’est pas vraiment vectoriel et ne gagne rien en netteté. Les SVG créés par AnyToSVG ne contiennent que des tracés et des dégradés, un tracé par couleur, jamais de bitmap incorporé.
03 · Un PNG est-il vectoriel ?
Non : et « PNG en vecteur » veut dire vectoriser
L’image d’un cercle n’est pas un cercle.
Le PNG n’est pas un format vectoriel, même s’il paraît net à 100 %. Un logo PNG contient un million de pixels colorés et aucune idée que certains forment un cercle, une lettre ou une courbe. Aucun réglage d’un éditeur photo ne le transforme en formes : renommer logo.png en logo.svg donne un fichier cassé.
Ce que l’on cherche en tapant « PNG en vecteur » ou « PNG en SVG », c’est la vectorisation : un logiciel examine les pixels, repère les frontières entre zones de couleur et les reconstruit sous forme de courbes. Pour un dessin en aplats (logos, icônes, clipart, dessins au trait, signatures), cela fonctionne presque parfaitement, parce que les formes étaient là, à retrouver. Pour une photographie, on obtient une affiche stylisée, car il n’y a pas de formes nettes, seulement des tons progressifs. Le guide bitmap ou vectoriel montre pas à pas ce que la vectorisation sait faire et ne sait pas faire, et la page image en vecteur traite les autres formats de bitmap.
04 · Choisir le SVG quand…
Le dessin doit s’agrandir ou être modifié
- Logos et marques qui apparaissent en favicon, dans l’en-tête d’un site et sur une bâche.
- Icônes et éléments d’interface pour le web : un seul fichier pour toutes les densités d’écran, recolorable en CSS.
- Illustrations, schémas, graphiques et cartes faits de formes plates et de lignes.
- Fichiers de découpe pour Cricut, Silhouette, le vinyle et les machines laser, qui ont besoin de contours et non de points.
- Visuels d’impression qui seront agrandis, et tout ce qu’un graphiste retouchera plus tard.
05 · Choisir le PNG quand…
L’image est vraiment une image
- Captures d’écran et tout ce qui contient du texte devant s’afficher exactement tel quel.
- Photographies et images texturées ou peintes : le PNG si vous avez besoin de transparence ou d’une qualité sans perte, le JPG ou le WebP si le poids prime.
- Aperçus pour les réseaux sociaux, signatures de courriel et icônes de boutiques d’applications, où les formulaires d’envoi et les messageries refusent souvent le SVG.
- Dessins complexes de milliers de petites formes, pour lesquels le SVG pèserait plus lourd que le bitmap.
- Pixel art, où les pixels carrés font partie du dessin.
La plupart des projets finissent par utiliser les deux : un SVG comme fichier maître, et des exports PNG pour les quelques endroits qui exigent un bitmap.
06 · Convertir
De PNG en SVG, et retour
Dans un sens, on vectorise ; dans l’autre, on dessine simplement.
PNG en SVG : le vectoriser
Déposez le PNG dans le convertisseur PNG en SVG (ou directement dans le convertisseur). Il s’exécute dans votre navigateur, choisit le mode couleur ou noir et blanc, compte les couleurs, détecte les dégradés lisses et affiche le SVG à côté de l’original en une seconde environ. Cochez Fond transparent si le logo est posé sur une couleur unie, baissez le curseur Couleurs jusqu’à ce que les pastilles correspondent au dessin, puis téléchargez. Pour un logo en particulier, voyez la page logo en SVG ; pour un JPG, JPG en SVG.
SVG en PNG : l’afficher
Ce sens n’exige aucune vectorisation, seulement une décision sur la taille, car un vecteur n’a pas de pixels tant qu’on ne le dessine pas. Ouvrez le SVG dans un navigateur, Inkscape, Figma ou Illustrator et exportez un PNG à la largeur voulue (exportez en 2× ou 3× pour les écrans à haute densité). Les boutons PNG du convertisseur AnyToSVG font exactement cela pour le SVG qu’il vient de vectoriser, en 1×, 2× ou 4× ; ce n’est pas un outil général de conversion de SVG en PNG.
Et la qualité ?
La conversion de PNG en SVG vaut ce que valent les formes du PNG. Un logo en aplats de 500 pixels ou plus se convertit presque parfaitement ; un logo minuscule, flou ou photographié donne un vecteur minuscule, flou ou déformé. De SVG en PNG, on ne perd rien, sauf la résolution que l’on a choisie.
07 · Questions
PNG ou SVG : questions fréquentes
Les questions derrière « qu’est-ce qu’un SVG », « un PNG est-il vectoriel » et « PNG ou SVG ». Davantage dans la FAQ complète.
Qu’est-ce qu’un fichier SVG ?
Le SVG (Scalable Vector Graphics) est un format d’image qui décrit une image sous forme de formes (lignes, courbes, remplissages et texte) écrites en XML, c’est-à-dire en texte brut. Comme il enregistre des formes et non des pixels, il peut être agrandi à n’importe quelle taille sans perdre en netteté, et tous les navigateurs actuels savent l’afficher.
Un PNG est-il un fichier vectoriel ?
Non. Le PNG est un format matriciel (bitmap) : il enregistre une grille de pixels colorés de taille fixe. Un PNG peut contenir l’image d’une forme vectorielle, mais le fichier lui-même ne contient aucune forme. Pour obtenir un vecteur, il faut vectoriser le PNG, ce que fait la conversion de PNG en SVG.
Le SVG est-il meilleur que le PNG ?
Pour les logos, les icônes, les schémas et les autres dessins en aplats, oui : il reste net à toute taille et pèse en général moins. Pour les photographies, les captures d’écran et les images texturées, non : le PNG (ou le JPG/WebP) est le bon choix. Aucun n’est meilleur dans l’absolu ; ils conviennent à des images différentes.
Un fichier SVG est-il plus léger qu’un PNG ?
Pour un dessin simple, il est en général beaucoup plus léger, car quelques tracés occupent bien moins de place qu’un million de pixels. Pour une image complexe, avec beaucoup de formes, de dégradés ou de texture, un SVG peut peser plus lourd que le PNG équivalent.
Peut-on utiliser le SVG partout où l’on utilise le PNG ?
Pas tout à fait. Les navigateurs, les outils de création, les machines de découpe et la plupart des sites acceptent le SVG. Beaucoup de messageries, de formulaires d’envoi sur les réseaux sociaux, de champs d’icône des boutiques d’applications et d’images d’aperçu Open Graph exigent encore du PNG ou du JPG : gardez donc un export bitmap pour ces cas.
Le SVG gère-t-il la transparence ?
Oui. Un SVG a un fond transparent tant que vous n’en dessinez pas un, et chaque remplissage peut être partiellement transparent. Le PNG gère aussi la transparence complète (canal alpha), ce qui explique que les deux soient courants pour les logos.
Comment convertir un PNG en SVG sans perdre en qualité ?
La vectorisation reconstruit les formes à partir des pixels : un PNG en aplats, comme un logo ou une icône, se convertit presque à l’identique. Les photos deviennent des affiches stylisées. Déposez le PNG dans le convertisseur PNG en SVG, vérifiez la vue Comparer et téléchargez le SVG.
Comment convertir un SVG en PNG ?
Ouvrez le SVG dans un navigateur, Inkscape, Figma ou Illustrator, puis exportez-le ou faites-en une capture à la taille voulue. Les boutons PNG du convertisseur AnyToSVG génèrent le SVG qui vient d’être vectorisé en 1×, 2× ou 4× ; ce n’est pas un outil général de conversion de SVG en PNG.
À lire aussi
Tout savoir sur le vectoriel
Essayez en lisant
Le convertisseur est gratuit, sans compte à créer, et affiche le SVG à côté de votre original en une seconde environ.