SVG ou PNG : quel format de fichier choisir pour les logos, les icônes et les captures d'écran
SVG pour les logos, les icônes et les formes simples. PNG pour les captures d'écran et les illustrations détaillées. Le même cœur zoomé dans les deux formats, de vrais poids de fichier, un tableau de décision et les réponses que cherchent les designers.
Chaque outil de design pose la même question à l'export : SVG ou PNG ? Les deux se ressemblent à la taille où vous travaillez, alors on prend celui qui est déjà coché. La différence apparaît plus tard, sur un écran plus grand, dans une page plus lente ou dans une couleur de marque qu'il faut changer. Voici la même icône dans les deux formats, ce que coûte chacun, et un tableau pour les cas qui reviennent dans tous les projets.
Ce qui change vraiment : des tracés ou des pixels
Un SVG stocke des instructions : trace cette courbe, remplis-la de cette couleur. Un PNG stocke une grille de pixels colorés, une valeur par point. Cette seule différence explique tout le reste.
Des instructions peuvent être exécutées à n'importe quelle taille, donc la courbe est redessinée bien lisse à chaque fois. Une grille a un nombre fixe de points, donc un écran plus grand doit les étirer. Le SVG est un format vectoriel et le PNG un format matriciel (raster). Les deux sont des standards ouverts du W3C, et le panneau d'export de Figma propose les deux côte à côte.
Le même cœur, zoomé à fond
À taille normale, les deux cœurs sont identiques. Zoomez et ce ne sont plus le même fichier.
SVG, zoomé
PNG, zoomé
Le cœur de gauche est redessiné à partir de son tracé à la nouvelle taille, donc le bord reste une courbe nette. Le cœur de droite est un rendu de 12 sur 12 pixels de la même icône, agrandi avec une mise à l'échelle au plus proche voisin, donc chaque pixel se voit. Les vrais écrans font ça de façon plus douce, en floutant au lieu de pixelliser, mais la cause est la même : le fichier n'a jamais contenu ce détail.
La solution pour un PNG est de l'exporter plus grand, ce qui est aussi son coût.
Recolorer en code : un fichier, toutes les couleurs
Un SVG, c'est du texte. Sa couleur est un attribut, donc une feuille de style peut la changer sans nouvel export.
.icon { fill: currentColor; }
.icon:hover { fill: #FF3B30; }
Les états au survol, le mode sombre et les thèmes de marque tiennent chacun en une ligne. Un PNG demande un nouveau fichier par couleur et par taille.
Poids du fichier : tout dépend du contenu de l'image
Nous avons mesuré le cœur ci-dessus. Le SVG pèse 290 octets. Le PNG à la même taille visuelle grossit avec les pixels.
| Icône de cœur | Poids |
|---|---|
| SVG (toute taille) | 290 octets |
| PNG à 24 px | 393 octets |
| PNG à 48 px | 739 octets |
| PNG à 96 px | 1 386 octets |
| PNG à 192 px | 2 883 octets |
| PNG à 512 px | 10 400 octets |
Pour les formes simples, le SVG reste stable alors que le PNG se multiplie à chaque taille livrée. C'est l'inverse pour les images détaillées. Nous avons exporté une carte de 1200 sur 800 avec un fond dégradé et une ombre douce : le PNG pèse 55 365 octets, un JPG en qualité 80 pèse 15 248 octets et un WebP en qualité 80 pèse 4 970 octets. Les dégradés et les ombres lisses sont faits de multiples nuances, et un SVG aurait besoin d'un filtre ou d'une énorme quantité de formes pour les imiter.
Quand le PNG est le bon choix
Le PNG est le bon choix quand l'image n'est pas faite de formes nettes :
- Les captures d'écran. Une fenêtre de navigateur ou un écran d'appli complet avec des ombres douces et un vrai rendu du texte, c'est du pixel par nature. Un PNG les conserve à l'identique.
- Les illustrations détaillées. Les textures fines, le grain et les ombrages peints ne se réduisent pas à des tracés.
- Les images transparentes qui ne sont pas simples. Le PNG gère la transparence, donc un détourage au bord doux fonctionne sur n'importe quel fond.
Un avertissement : un PNG fait à partir d'un logo reste un PNG à taille fixe. Gardez le SVG comme fichier maître et n'exportez des PNG que là où un SVG ne peut pas être lu.
Quand le SVG est le bon choix
- Les logos. Un seul fichier pour l'en-tête du site, la favicon et le panneau publicitaire. Voir les formats de fichier de logo expliqués pour la liste complète, avec PDF, AI et EPS.
- Les icônes. Un jeu d'icônes de barre d'onglets ou de barre d'outils, recoloré par état avec du CSS. Lucide, l'un des jeux d'icônes open source les plus utilisés, fournit chaque icône en SVG.
- Les formes simples et illustrations. Aplats de couleur, séparateurs, badges et graphiques.
Où le SVG a ses limites : un fichier avec des milliers de formes devient lourd, et certains endroits comme les clients e-mail, les aperçus de partage social et les anciennes applis peuvent ne pas l'afficher. Utilisez un PNG dans ces cas.
Et les photos ?
Ni l'un ni l'autre. Une photo prise avec un téléphone de 2026 a des tons continus, exactement ce que les vecteurs font mal et ce que le PNG alourdit. Utilisez le JPG ou le WebP, qui compressent bien mieux les photos que le PNG. Le WebP est pris en charge par les navigateurs actuels.
SVG ou PNG : un tableau de décision
| Ressource | Choix | Pourquoi |
|---|---|---|
| Logo sur un site web | SVG | Net à toutes les tailles, fichier minuscule |
| Favicon | SVG, plus un PNG de secours | Les navigateurs modernes prennent le SVG, certains endroits veulent encore du PNG |
| Jeu d'icônes d'interface | SVG | Recoloration par état avec CSS |
| Illustration en formes plates | SVG | Reste légère et nette |
| Graphique ou schéma | SVG | Texte et lignes restent nets |
| Capture d'écran d'appli | PNG | Les pixels sont le contenu |
| Illustration peinte ou texturée | PNG | Trop détaillée pour des tracés |
| Image avec ombre douce et dégradé | PNG, ou WebP | Beaucoup de nuances, un vecteur peine |
| Photographie | JPG ou WebP | Fichier le plus léger à rendu égal |
| Image d'aperçu e-mail ou réseaux sociaux | PNG | Large compatibilité, pas de mauvaise surprise avec le SVG |
FAQ
Le SVG est-il meilleur que le PNG ?
Pour les logos, les icônes et les formes simples, oui : il est plus net à toute taille et généralement plus léger. Pour les captures d'écran et les illustrations détaillées, le PNG est le meilleur format. Aucun des deux ne gagne sur tout.
Faut-il utiliser SVG ou PNG pour un logo ?
SVG. Gardez-le comme fichier maître et exportez-en des PNG pour les endroits qui ne peuvent pas afficher un SVG, comme certains outils d'e-mail et de réseaux sociaux.
Le SVG est-il plus léger que le PNG ?
Pour les formes simples, oui, comme le cœur ci-dessus le montre : 290 octets contre 393 à 10 400 octets selon la taille. Pour les images détaillées, c'est l'inverse, car un SVG a besoin de beaucoup de formes pour les décrire.
Peut-on recolorer un PNG comme un SVG ?
Pas proprement. Le remplissage d'un SVG est un attribut texte que l'on change en CSS. Un PNG est fait de pixels figés, donc une nouvelle couleur demande un nouvel export.
Pourquoi mon PNG est-il flou quand je zoome ?
Un PNG contient une grille fixe de pixels. Quand il est affiché plus grand que sa taille propre, l'écran étire ces pixels et les bords deviennent flous ou pixellisés. Exportez à une taille plus grande, ou utilisez un SVG si l'image est une forme simple.
Le JPG ou le WebP est-il meilleur que le PNG pour les photos ?
Oui. Ils compressent bien mieux les photos, donc la page se charge plus vite. Gardez le PNG pour les captures d'écran, le texte net et les graphiques.
Sources
- Scalable Vector Graphics (SVG) 2, W3C.
- Portable Network Graphics (PNG) Specification, W3C.
- Image file type and format guide, MDN Web Docs.
- Poids de fichier mesurés par nos soins avec sharp : un tracé de cœur de 24 sur 24 en SVG et en PNG à cinq tailles, et une carte à dégradé et ombre de 1200 sur 800 en PNG, JPG et WebP en qualité 80.
- D'abord publié sous forme de carrousel sur UX Brainy.
Want your logo, icons and UI exported and organized as one system, ready for every screen? Our team designs and hands over the full set.
Get Started
