SVG stocke une image sous la forme formes mathématiques qui s'adapte à n'importe quelle taille sans flou, tandis que PNG stocke une grille fixe de pixels. Cette seule différence décide du choix : SVG pour les logos, les icônes et les graphiques plats qui doivent être mis à l'échelle, PNG pour les photographies et les détails complexes. SVG (Scalable Vector Graphics) est un format basé sur XML normalisé par le W3C en 2001 ; PNG (Portable Network Graphics) est un format raster de 1996. Cette comparaison explique le vecteur par rapport au raster, comment chacun gère la mise à l'échelle et la taille du fichier, la transparence, l'édition, la prise en charge du navigateur et une règle claire pour savoir où utiliser.

Aucun des deux formats n’est globalement meilleur, car ils résolvent des problèmes différents. SVG est imbattable pour les graphiques qui apparaissent dans de nombreuses tailles ; PNG est le seul choix judicieux pour les photographies et les images détaillées. Savoir à quelle famille appartient votre image répond à la question avant même d’ouvrir un convertisseur.

Vecteur versus raster

Les deux formats décrivent les images de manière opposée. SVG répertorie des instructions telles que dessiner un cercle ici, remplir ce chemin avec cette couleur, afin que le navigateur le restitue à n'importe quelle taille. PNG stocke la couleur réelle de chaque pixel dans une grille, comme une mosaïque. Le vecteur convient aux formes aux bords nets ; le raster convient aux photographies, où des millions de pixels uniques n'ont aucune forme à décrire. C’est là la racine de toutes les différences pratiques entre eux.

Une analogie aide. Un vecteur est une recette : suivez-la à n’importe quelle échelle et vous obtenez le même plat. Un raster est une photographie du plat fini : agrandissez-le et vous verrez des pixels plus gros et plus flous. La recette reste parfaite quelle que soit la taille ; la photographie ne le fait pas.

Mise à l'échelle : le SVG gagne

La mise à l'échelle est l'avantage décisif du SVG. Un logo SVG reste netteté comme un rasoir, d'un favicon de 16 pixels à un panneau d'affichage, car les mathématiques recalculent à chaque taille. Un PNG devient flou dès que vous l'agrandissez au-delà de sa résolution, car le logiciel doit inventer des pixels qui n'ont jamais été capturés. Pour tout ce qui est affiché dans plusieurs tailles, SVG sert un seul fichier où PNG nécessite plusieurs exportations à différentes résolutions.

Cela compte plus qu’il n’y paraît. Les écrans modernes varient des petits téléphones aux grands moniteurs 4K, et un design doit être net sur chacun d'eux. Un SVG gère chaque écran à partir d'un seul fichier. Un PNG nécessite une petite version, une grande version et souvent une version Retina, ce qui multiplie les ressources que vous gérez.

Taille du fichier

La taille du fichier dépend de la complexité et non des dimensions, ce qui est le contraire du PNG. Un simple logo bicolore comme peut peser le SVG quelques kilo-octets et restez à cette taille à n'importe quelle échelle, souvent plus petite que la PNG. Mais la taille du SVG augmente avec le nombre de formes, de sorte qu'une photographie tracée devient plusieurs fois plus grande que le PNG et s'affiche lentement. La taille du PNG augmente avec le nombre de pixels, donc une grande photo est lourde quoi qu'il arrive.

La leçon est de faire correspondre le format au contenu. Pour une icône plate, SVG est à la fois plus petit et infiniment évolutif. Pour une photo détaillée, les ballons SVG se déploient dans des milliers de chemins tandis que le PNG reste une taille prévisible. La complexité, et non le nom du format, détermine le poids.

Transparence

Les deux formats prennent en charge la transparence, donc aucun des deux ne gagne ici. SVG le gère de manière native, puisqu'une forme peut tout simplement n'avoir aucun remplissage derrière elle, et PNG comporte un canal alpha complet pour une transparence douce et partielle. Un logo reste transparent sur n’importe quel arrière-plan, quel que soit le format. La seule différence est que la transparence du SVG fait partie de la description de sa forme, tandis que le PNG stocke une valeur d'opacité pour chaque pixel.

Édition et flexibilité

L'édition privilégie le SVG pour les graphiques. Parce qu'un SVG est un texte décrivant des formes, ses chemins recolorer et animer avec CSS, et tout texte à l'intérieur reste du vrai texte qu'un lecteur d'écran peut lire et qu'un moteur de recherche peut indexer. Un PNG est constitué de pixels fixes, donc changer une couleur signifie réexporter depuis la source. Pour un logo que vous allez relooker, thèmer ou animer, SVG est beaucoup plus flexible.

Prise en charge du navigateur

Le soutien est universel pour les deux, il ne décide donc pas du choix. Chaque navigateur lit SVG et PNG sans plugins, et ce depuis de nombreuses années. La différence pratique réside dans le contexte : SVG appartient aux pages Web et aux interfaces d'applications, tandis que PNG fonctionne également dans les e-mails, les documents et les logiciels plus anciens qui peuvent ne pas accepter SVG. Pour un site Web, l’un ou l’autre est sûr ; pour un logo de courrier électronique, PNG est le choix le plus fiable.

Quand utiliser chacun

La règle est simple et mérite d’être mémorisée :

Utiliser SVG pour les logos, les icônes, les graphiques, les diagrammes et les dessins au trait qui doivent évoluer et rester nets.
Utiliser PNG pour les captures d'écran, les graphiques détaillés et toute image avec des bords adoucis ou de nombreuses couleurs.
N'utilisez ni l'un ni l'autre pour les photos à long terme : JPG ou WebP compressent des photographies bien plus petites que PNG.

Conservez un fichier vectoriel principal pour les actifs de la marque et exportez des copies PNG là où le SVG n'est pas accepté, comme les e-mails ou certains téléchargements d'applications.

SVG et design réactif

Le design réactif est l'endroit où SVG gagne sa place. Un site moderne doit être net sur un téléphone, un ordinateur portable et un moniteur 4K, et un SVG gère les trois à partir de un fichier à n'importe quelle densité de pixels. Il n'est pas nécessaire d'exporter séparément les petites, les grandes et la rétine, et aucun flou lorsque le navigateur redimensionne l'image pour un écran haute résolution. Le vecteur se redessine simplement de manière nette, quelle que soit la taille requise par la mise en page.

PNG ne peut pas correspondre à cela. Pour rester net sur un écran Retina, un fichier PNG doit être exporté avec une double résolution, ce qui double la taille du fichier, et même dans ce cas, il devient flou s'il est étiré au-delà. La gestion de plusieurs tailles PNG pour des mises en page réactives représente un réel coût de maintenance qu'un seul SVG supprime.

Quand le PNG bat le SVG en pratique

La PNG gagne dans plus de cas que sa réputation ne le suggère. N'importe quelle image avec détails photographiques, dégradés, textures ou ombres douces appartient au format PNG, car le tracer en SVG produit un désordre gonflé et laid. Les captures d'écran appartiennent au territoire PNG, car elles mélangent du texte avec des détails d'interface qui ne sont pas vectorisés. Et une illustration complexe avec des centaines de couleurs est plus petite et plus propre en PNG qu'en SVG géant composé de milliers de chemins.

L’erreur que font les gens est de supposer que SVG est toujours le choix moderne et supérieur. Il n'est supérieur que pour les graphiques plats et aux bords nets. Poussez une image détaillée dans SVG et vous obtenez un fichier plus gros dont le rendu est lent, à l'opposé de ce que vous vouliez.

Une note sur SVG et la sécurité

SVG comporte une considération que PNG n'a pas : parce qu'il s'agit d'un code, un fichier SVG peut contenir des scripts. Un SVG malveillant téléchargé sur un site pourrait, en théorie, exécuter JavaScript lorsqu'il est affiché. C'est pourquoi de nombreuses plates-formes nettoient ou rejettent les SVG téléchargés par les utilisateurs, et pourquoi vous ne devez faire confiance qu'aux SVG provenant d'une source connue. PNG, étant de pures données de pixels, ne comporte aucun risque. Pour vos propres logos et icônes, ce n'est pas un problème, mais cela explique pourquoi certains formulaires de téléchargement acceptent le format PNG et non SVG.

Erreurs courantes lors de la conversion en SVG

Deux erreurs gâchent la plupart des conversions PNG vers SVG. Le premier est essayer de vectoriser une photo, qui produit des milliers de chemins et un fichier plus volumineux que l'original. La seconde consiste à laisser le bitmap d'origine intégré dans le SVG après une trace automatique, de sorte que le fichier est vraiment un PNG dans un wrapper SVG, sans rien gagner. Tracez uniquement des graphiques plats, et pour un logo de marque, redessinez-le dans un éditeur vectoriel plutôt que de vous fier à un tracé automatique, qui donne une géométrie nette et le fichier le plus petit.

Comment convertir PNG en SVG

Convertir un PNG en SVG signifie vectoriser : tracer les pixels en chemins. Cela fonctionne pour logos plats, icônes et dessins au trait, et échoue pour les photographies, qui n'ont pas de formes nettes à tracer. Notre Convertisseur PNG en SVG trace des graphiques simples dans votre navigateur, donc rien n'est téléchargé. Pour un logo de marque que vous possédez, le redessiner dans un éditeur vectoriel produit un résultat plus propre que n'importe quelle trace automatique. Pour les photos, utilisez notre Convertisseur PNG en JPG à la place.

Questions fréquemment posées

Le SVG est-il bon pour le design réactif ?

Oui, idéal. Un SVG reste net sur chaque écran et densité de pixels, supprimant ainsi le besoin d'exportations PNG distinctes de petite, grande et rétine.

Pourquoi certains sites rejettent-ils les téléchargements SVG ?

Parce que un SVG peut contenir des scripts, contrairement à un PNG. Les plates-formes nettoient ou bloquent les SVG des utilisateurs pour des raisons de sécurité, c'est pourquoi certains formulaires n'acceptent que les PNG.

Pourquoi mon SVG converti est-il plus grand que le PNG ?

Vous êtes probablement tracé une photo ou laissé le bitmap intégré. Vectorisez uniquement les graphiques plats et supprimez l'image d'origine après le traçage afin que le SVG contienne les chemins et non les pixels.

Le SVG est-il meilleur que le PNG ?

Pour les graphiques, oui. SVG évolue sans flou à une petite taille. Pour les photographies, le format PNG l'emporte, car les photos n'ont pas de formes claires à stocker en tant que vecteurs.

Quelle est la différence entre SVG et PNG ?

SVG est mathématiques évolutives ; PNG est une grille fixe de pixels. SVG reste net quelle que soit la taille, tandis que PNG est flou lorsqu'il est agrandi au-delà de sa résolution.

Puis-je utiliser SVG pour les photos ?

Non, pas utilement. Les photos ont des millions de couleurs et des bords doux sans formes à tracer, une photo SVG est donc grande et désordonnée. Utilisez PNG ou JPG.

Qu'est-ce qui est le plus petit, SVG ou PNG ?

Pour des graphiques simples, SVG. Un logo bicolore fait quelques kilo-octets en SVG à n'importe quelle taille. Pour les photos, le PNG est plus petit, puisqu'il s'agit d'une photo tracée de ballons.

Le SVG conserve-t-il la transparence ?

Oui. SVG prend en charge la transparence de manière native, comme le canal alpha du PNG, de sorte qu'un logo reste transparent sur n'importe quel arrière-plan.

Tous les navigateurs prennent-ils en charge SVG ?

Oui. Tous les navigateurs modernes lisent SVG et PNG sans plug-in. SVG convient aux pages Web, tandis que PNG fonctionne également dans la messagerie électronique et les anciens logiciels.

Comment convertir PNG en SVG ?

Tracez-le. Un vectoriseur trace un PNG plat dans des chemins SVG, qui fonctionne pour les logos et les icônes mais pas pour les photographies.

Puis-je modifier un SVG après l’avoir créé ?

Oui. Les chemins SVG s'ouvrent dans n'importe quel éditeur de vecteurs et recolorez ou animez avec CSS, puisque le fichier est un texte décrivant des formes, pas des pixels fixes.

Quel format dois-je utiliser pour un logo de site Web ?

SVG. Il évolue de manière nette sur chaque écran à partir d'un seul fichier, et son texte reste lisible pour les moteurs de recherche. Conservez un PNG pour les e-mails où SVG n'est pas accepté.

Le PNG ou le SVG sont-ils meilleurs pour une icône ?

SVG, pour la mise à l'échelle. Une icône SVG reste nette quelle que soit sa taille, tandis qu'une icône PNG nécessite plusieurs exportations et devient floue lorsqu'elle est agrandie.

SVG et PNG résolvent différents problèmes : SVG stocke des mathématiques évolutives qui restent nettes quelle que soit la taille, tandis que PNG stocke une grille fixe de pixels qui devient floue lorsqu'elle est agrandie. SVG gagne pour les logos, les icônes et les dessins au trait qui doivent être mis à l'échelle, modifiés et animés avec CSS et servent chaque écran à partir d'un seul fichier. PNG gagne pour les photographies, les captures d'écran et les images détaillées, et fonctionne là où SVG n'est pas accepté. Faites correspondre le format au contenu et utilisez nos convertisseurs ci-dessus pour vectoriser un graphique simple ou gérer une photo raster, le tout dans votre navigateur.

Référence rapide : SVG ou PNG

Atteindre SVG lorsque l'image est un logo, une icône, un graphique ou un dessin au trait qui doit être mis à l'échelle, lorsque vous souhaitez la recolorer ou l'animer avec CSS, ou lorsqu'un fichier doit servir toutes les tailles d'écran. Atteindre PNG lorsque l'image est une capture d'écran, un graphique détaillé ou tout autre élément comportant des dégradés, des textures ou des bords adoucis, et lorsque vous en avez besoin pour fonctionner dans la messagerie électronique ou dans un logiciel plus ancien qui rejette SVG. La ligne de démarcation est simple : les graphiques plats et aux contours nets deviennent vectoriels, tout ce qui est détaillé devient raster.

Garder un vecteur maître

Pour tout élément de marque, conservez l’original en tant que modèle vectoriel et exportez des copies raster si nécessaire. Un seul logo SVG peut générer un favicon, un avatar social et un fichier d'impression, chacun exporté au bon format et à la bonne taille à la demande. Travailler dans l'autre sens, depuis un PNG raster vers un vecteur, signifie un traçage, qui ne récupère jamais complètement une géométrie propre. Stockez donc le maître au format SVG lorsque vous le pouvez et traitez les exportations PNG comme des copies jetables que vous pouvez régénérer à tout moment.

L'essentiel

SVG et PNG ne sont pas tant des rivaux que des spécialistes. Les vecteurs décrivent les formes et les échelles pour toujours, donc les logos et les icônes appartiennent au SVG. Les pixels capturent les détails, les photographies et les captures d'écran appartiennent donc au format PNG. Choisissez en posant une question : cette image présente-t-elle des formes nettes et plates ou des détails photographiques fins ? Cette réponse décide du format à chaque fois, et conserver un maître vectoriel signifie que vous pouvez toujours exporter la copie raster dont vous avez besoin.