L’essentiel en bref
- Le SVG est un format vectoriel qui décrit des formes par des calculs, il reste donc parfaitement net à toutes les tailles.
- Le PNG est un format matriciel fait d’une grille fixe de pixels, il devient flou ou pixelisé quand on l’agrandit au-delà de sa taille.
- Utilisez le SVG pour les logos, les icônes, les illustrations simples et les éléments d’interface sur le web et en impression.
- Utilisez le PNG pour les photos, les textures, les visuels complexes et tout ce qui est publié sur les réseaux sociaux, qui n’acceptent pas le SVG.
- Un bon kit de logo contient les deux : un SVG maître et des exports PNG aux tailles dont chaque support a besoin.
Sur cette page
SVG ou PNG, c’est au fond vectoriel contre pixels. Un fichier SVG stocke des formes sous forme d’instructions (dessine un cercle ici, remplis-le de cette couleur), si bien qu’un navigateur ou une imprimante le redessine net à toute taille, d’un favicon de 16 pixels à une enseigne de boutique. Un PNG stocke une grille fixe de pixels colorés : il est parfait à sa propre taille et flou quand on l’agrandit. Utilisez le SVG pour les logos, les icônes et les visuels simples sur le web et en impression. Utilisez le PNG pour les photos, les visuels texturés et tout ce que vous publiez sur les réseaux sociaux.
Ce qu’est vraiment un fichier SVG
SVG signifie Scalable Vector Graphics, et c’est du texte brut. Ouvrez-en un dans un éditeur de code et vous verrez un balisage lisible, pas du bruit. C’est pour cela que les SVG sont minuscules pour des formes simples, que vous pouvez changer leur couleur en CSS, et que les moteurs de recherche et les lecteurs d’écran peuvent lire le texte qu’ils contiennent.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Studio Nine">
<defs>
<linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#4f46e5"/>
<stop offset="1" stop-color="#db2777"/>
</linearGradient>
</defs>
<circle cx="32" cy="32" r="28" fill="url(#g)"/>
<path d="M22 40 L32 20 L42 40 Z" fill="#ffffff"/>
</svg>viewBox fixe le système de coordonnées du dessin ; la taille d’affichage dépend de la page.Un PNG du même symbole demande un fichier séparé pour chaque taille où vous le voulez net, et aucun ne peut être recoloré sans un nouvel export. La documentation SVG de MDN décrit le format en entier.
SVG et PNG côte à côte
PNG
SVG
PNG
SVG
PNG
SVG
PNG
SVG
PNG
SVG
PNG
SVG
PNG
SVG ou PNG pour un logo
Gardez le logo maître en SVG. C’est le seul fichier qui sert tous les usages futurs : en-tête de site, bannière de 4 mètres, broderie, papier à en-tête, favicon. Exportez ensuite des PNG à partir de lui pour les endroits qui n’acceptent pas le vectoriel, surtout les réseaux sociaux, les signatures d’e-mail et certains outils de présentation.
Fichier
Taille
Taille
Fichier
Taille
Fichier
Taille
Fichier
Taille
Les photos de profil sont toujours en PNG ou JPG. Exportez le logo en grand, 1080×1080, pour qu’il reste net sur les écrans haute densité.
Quand le PNG est le bon choix
Le vectoriel ne fonctionne que si l’image peut se décrire en formes. Dès qu’une image contient du détail photographique, une lumière douce, du grain ou des milliers de légères variations de couleur, un PNG est plus léger et plus fidèle. Vectoriser une photo en SVG donne un fichier à la fois plus lourd et moins bon.
- Les photos et les collages photo.
- Les visuels texturés : grain, papier, coups de pinceau, effets film.
- Les posts, stories et carrousels, puisque les plateformes n’acceptent que des pixels.
- Les captures d’écran et tout ce qui est capturé à l’écran.
- Les fonds riches avec des couches de lumière et de bruit.
Formes plates, bords nets, quelques couleurs : le terrain idéal du SVG.
Le grain, la lumière douce et la texture de matière ont leur place dans un PNG.
SVG ou PNG pour un site web
Sur un site, utilisez du SVG intégré ou un fichier SVG pour les logos, icônes et illustrations, et des formats modernes pour les photos. Les icônes SVG suivent la taille du texte, peuvent prendre currentColor pour suivre votre thème, et n’ont besoin d’aucun fichier séparé pour les écrans haute densité. Pour les images matricielles, le WebP est en général un meilleur choix que le PNG sur vos propres pages.
À éviter
- Un logo PNG étiré sur toute la largeur d’un en-tête
- Une photo vectorisée en un énorme SVG
- Accepter des fichiers SVG d’autrui sans les assainir
- Des icônes en PNG qui exigent des copies 1x, 2x et 3x
À faire
- Un logo SVG avec une largeur fixée en CSS
- Des photos en WebP ou JPG à leur taille d’affichage
- Traiter les SVG envoyés par les utilisateurs comme du code, car ils peuvent contenir des scripts
- Des icônes SVG avec
fill: currentColor
Comment convertir un SVG en PNG
- 1
Choisissez la plus grande taille nécessaire
Une photo de profil en 1080×1080 ou une signature d’e-mail en 1200×400 (le double de son affichage en 600×200). Exportez une fois à cette taille plutôt que d’agrandir ensuite.
- 2
Exportez depuis la source
Dans Figma, Illustrator ou Inkscape, exportez le cadre en PNG à la taille choisie. Exporter depuis le vectoriel garde chaque bord net.
- 3
Gardez la transparence
Laissez le fond vide pour que le PNG ait un canal alpha. Voyez le fond transparent pour le vérifier.
- 4
Vérifiez à 100 %
Regardez les traits fins et le petit texte en taille réelle. S’ils se désagrègent, simplifiez le logo pour les petits usages plutôt que de livrer un fichier brouillé.
Dans l’autre sens, du PNG au SVG, ce n’est pas une conversion mais un redessin. La vectorisation automatique fonctionne pour un logo plat et affirmé, et échoue sur tout ce qui a de la texture ou des bords doux. Si votre logo n’existe qu’en PNG, faites-le redessiner une fois en vectoriel ; tous les fichiers suivants en seront meilleurs.
Les exports Pro de Gradiently couvrent les deux côtés : un design peut sortir en SVG pour le web et l’impression, ou en PNG transparent pour les plateformes, depuis le même fichier. Exporter en SVG et en PNG transparent montre comment, et PNG ou JPG tranche l’autre choix courant.
Les questions qu’on nous pose
Le SVG est-il meilleur que le PNG pour un logo ?
Pour le fichier maître, oui : un logo SVG reste net à toutes les tailles et peut être recoloré. Exportez des copies PNG pour les réseaux sociaux et les e-mails, qui n’acceptent pas le SVG.
Peut-on publier un SVG sur Instagram ?
Non. Instagram et les autres réseaux sociaux acceptent le PNG, le JPG et la vidéo. Exportez un PNG à la taille de la plateforme, par exemple 1080×1080 pour un post carré.
Un SVG est-il plus léger qu’un PNG ?
Pour des formes simples comme les logos et les icônes, un SVG est en général beaucoup plus léger. Pour les photos et les images texturées, un PNG ou un JPG est plus léger et plus fidèle.
Le SVG gère-t-il la transparence ?
Oui. Tout ce qui n’est pas dessiné dans un SVG est transparent, il se pose donc proprement sur n’importe quel fond.
Peut-on convertir un logo PNG en SVG ?
Seulement en le vectorisant ou en le redessinant. La vectorisation automatique fonctionne pour les logos plats et affirmés ; les logos détaillés ou texturés doivent être redessinés à la main en vectoriel.
Écrit par Gradiently
L’équipe derrière Gradiently, un outil de création construit autour des Marks : des dégradés vivants qui donnent à tout ce que vous créez votre propre signature.
Voir notre profil