# SVG ou PNG : vectoriel ou pixels pour logos et visuels [Canonical HTML page](https://gradiently.design/fr/guide/svg-vs-png) Un SVG est un ensemble d’instructions de dessin. Un PNG est une grille fixe de points. Cette seule différence décide du fichier qui va sur votre site, votre emballage et votre Instagram. ## The short version - 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. **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. ```html ``` Un symbole de logo complet en quelques centaines d’octets. Le `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](https://developer.mozilla.org/en-US/docs/Web/SVG) décrit le format en entier. ## SVG et PNG côte à côte | Propriété | SVG | PNG | | --- | --- | --- | | Type | Vectoriel : formes et tracés | Matriciel : une grille de pixels | | Mise à l’échelle | Net à toutes les tailles | Net à sa taille, flou une fois agrandi | | Transparence | Oui | Oui, canal alpha complet | | Photos et texture | Médiocre : fichiers énormes ou impossibles | Excellent | | Modifiable en code | Oui : couleurs, animation, CSS | Non | | Publication sur les réseaux sociaux | Non accepté | Accepté partout | | Poids typique, logo simple | 1 à 10 Ko | 10 à 100 Ko par taille | ## 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. | Où va le logo | Fichier | Taille | | --- | --- | --- | | En-tête et pied de page du site | SVG | S’adapte | | Favicon | SVG plus PNG de secours | ICO en 32×32, PNG en 180×180, 192×192 et 512×512 | | Photo de profil Instagram, LinkedIn ou X | PNG | Carré de 1080×1080, symbole dans le cercle central | | Signature d’e-mail | PNG | Jusqu’à 600×200, exporté au double de la taille d’affichage | | Imprimeur, enseigniste, objets | SVG ou PDF | Vectoriel, toute taille | Un SVG maître, une poignée d’exports PNG. [Les tailles de logo](https://gradiently.design/fr/guide/logo-sizes) et [les déclinaisons de logo](https://gradiently.design/fr/guide/logo-variations) vont plus loin. Une photo de profil carrée avec un logotype simple centré sur un fond en dégradé 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. Un visuel carré intitulé Vectoriel, représentant des formes plates adaptées au SVG Formes plates, bords nets, quelques couleurs : le terrain idéal du SVG. Un visuel carré intitulé Pixels sur un dégradé texturé, représentant un visuel adapté au PNG 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](https://gradiently.design/fr/guide/webp-images) 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` > **Un SVG peut contenir du code** Comme le SVG est du balisage, un fichier de source inconnue peut inclure des scripts. N’autorisez l’envoi de SVG sur votre site que s’ils sont assainis, ou convertissez-les en PNG à l’envoi. ## 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](https://gradiently.design/fr/guide/transparent-background) 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](https://gradiently.design/fr/guide/export-svg-transparent-png) montre comment, et [PNG ou JPG](https://gradiently.design/fr/guide/png-vs-jpeg) tranche l’autre choix courant. ## FAQ ### 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.