Comment convertir un SVG en PNG (et quand le faire)

Le format SVG est parfait pour le web, mais de nombreuses plateformes ne le prennent pas en charge : les réseaux sociaux, les clients de messagerie électronique et de nombreux services d'impression préfèrent une image matricielle. Convertir un SVG en PNG ne prend qu'une minute ; si vous choisissez la bonne taille d'exportation, le résultat sera aussi net que l'original. Une mise en garde : le PNG ne peut pas revenir proprement vers un SVG, conservez donc toujours votre fichier source. Si vous savez déjà ce dont vous avez besoin, accédez directement au convertisseur SVG vers PNG ; sinon, ce guide explique quand convertir, quelle taille en pixels exporter pour le web, les écrans haute résolution et l'impression, ainsi que comment préserver votre fond transparent.

SVG vs PNG en une minute

Le SVG est un format vectoriel : il s'agit d'un ensemble d'instructions de dessin (tracés et formes) qui s'affiche avec netteté à toute échelle, qu'il s'agisse de 16 px ou de 16 000 px, tout en restant léger. Il est idéal pour les logos, les icônes et l'art géométrique. Il est modifiable dans un éditeur de texte et supporte même l'animation.

Le PNG est un format matriciel : c'est une grille fixe de pixels. Il est net à sa taille native mais devient flou lorsqu'il est agrandi. Il excelle dans les dégradés, les ombres et les détails photographiques, et s'affiche de manière prévisible partout.

L'erreur principale des utilisateurs : convertir un SVG en PNG ne « perd » pas de qualité lors de l'exportation. Les pixels sont générés à partir du calcul vectoriel, donc une exportation aux dimensions appropriées est parfaite pixel par pixel. Le véritable inconvénient est que le PNG reste figé à une résolution donnée pour toujours.

Règle générale : conservez le SVG comme votre référence principale et exportez un PNG chaque fois que la destination l'exige.

Quand devez-vous convertir un SVG en PNG ?

Vous convertissez lorsque la destination ne gère pas le SVG, et non parce que le PNG serait intrinsèquement meilleur. En pratique, ces situations surviennent fréquemment :

• Réseaux sociaux. Instagram, X/Twitter, Facebook et LinkedIn n'acceptent pas le téléversement de fichiers SVG. Convertissez-les en PNG ou JPG avant de publier.
• E-mail. La plupart des clients de messagerie ont une prise en charge limitée ou nulle du SVG. Utilisez le PNG pour les images de newsletters et les signatures e-mail.
• Favicons et icônes d'application. Les navigateurs modernes acceptent les favicons SVG, mais les icônes Apple Touch et les anciens navigateurs nécessitent encore des versions PNG. Notre guide sur la façon de créer un favicon à partir d'un logo détaille cette procédure de A à Z.
• Services d'impression. De nombreux imprimeurs de produits photo (autocollants, cartes de visite, articles promotionnels) acceptent le PNG mais pas le SVG.
• Logiciels hérités et certains CMS. Les outils plus anciens et les flux de travail documentaires peuvent afficher incorrectement ou pas du tout le SVG ; le PNG est alors le choix sûr. Certaines versions d'Office et les anciens flux de travail documentaires gèrent le SVG de manière incohérente.

Et quand ne pas convertir : sur les sites web. Là-bas, le SVG reste net à toutes les tailles, peut être stylisé et animé via CSS, et pèse souvent moins qu'un grand PNG. Si votre seule destination est votre propre site, évitez entièrement la conversion.

Source pour les points sur le support des plateformes ci-dessus : ConverterUp.

Comment convertir un SVG en PNG dans Tool Cloud (étape par étape)

1. Ouvrez la page du convertisseur SVG vers PNG.
2. Téléversez votre SVG. Vous pouvez téléverser plusieurs fichiers à la fois si vous convertissez un ensemble.
3. Convertissez et téléchargez le PNG. Pour obtenir une taille exacte en pixels, définissez les champs largeur et hauteur (ou utilisez l'option de résolution, qui varie de 72 à 1200) avant de convertir ; une option pour maintenir les proportions est également disponible. Les fichiers téléversés sont supprimés automatiquement après le traitement.

Comme le convertisseur demande explicitement une largeur et une hauteur, vous n'avez pas besoin de modifier le viewport de votre SVG ni de redimensionner quoi que ce soit dans un éditeur de design : décidez simplement de la taille de sortie (section suivante) et saisissez-la.

Convertir un SVG en PNG sans outil en ligne

Vous n'avez pas besoin d'un convertisseur en ligne pour cela. Chaque outil de design exporte directement en PNG :

• Figma, Illustrator, Affinity, Inkscape : utilisez la boîte de dialogue d'exportation, choisissez PNG et définissez la taille d'exportation en pixels (c'est ici que vous appliquez le facteur d'échelle indiqué ci-dessous). C'est la meilleure option si vous disposez du fichier source, car vous pouvez convertir le texte en tracés et supprimer les rectangles d'arrière-plan indésirables en une seule opération.
• Depuis un site web : faites un clic droit sur le SVG (ou sur le fichier SVG lui-même une fois ouvert dans un onglet de navigateur) et utilisez « Enregistrer l'image sous » ; vous obtiendrez généralement le SVG, puis exportez-le ou convertissez-le depuis cet emplacement.
• Dernier recours, sans aucun outil : ouvrez le SVG dans un navigateur, zoomez autant que possible tant que l'image reste nette, et prenez une capture d'écran. Vous perdrez la transparence sauf si vous utilisez un outil de capture qui la supporte, et les bords ne seront pas aussi nets qu'avec une vraie exportation. Acceptable pour une maquette rapide, mais pas pour une production finale.

Quelle taille en pixels devez-vous exporter ? (Guide du facteur d'échelle)

Choisissez votre taille d'exportation en multipliant les dimensions du viewport du SVG par un facteur d'échelle : un SVG avec un viewport de 200×200 exporté à 1x donnera un PNG de 200×200px, à 2x donnera 400×400px, et à 3x donnera 600×600px. Dans le convertisseur, ce même calcul se résume simplement à la largeur et la hauteur que vous saisissez. Ensuite, adaptez le facteur à la destination :

Pour les icônes et logos web courants, le facteur 2x est le compromis pratique idéal : un seul fichier à 2x couvre à la fois les écrans standards et les écrans haute résolution, car il se réduit gracieusement sur les affichages standards. Si une spécification exige une taille fixe unique, le facteur 1x correspondant au viewport est la réponse. Pour l'impression, optez pour 3x à 4x ; cela fournit suffisamment de pixels pour les petits éléments imprimés comme les autocollants ou les cartes de visite, tandis que les grandes impressions nécessitent proportionnellement plus de pixels.

Il n'y a aucune pénalité de qualité à exporter plus grand que nécessaire, car les pixels proviennent du calcul vectoriel et non d'un étirement. Le seul inconvénient est la taille du fichier, qui augmente au carré du facteur d'échelle : un PNG à 4x contient seize fois plus de pixels qu'un PNG à 1x. Choisissez donc votre taille en fonction de l'usage final du fichier, et non sur le principe « plus grand est plus sûr ».

Conserver la transparence (et quand utiliser un fond blanc)

Le canal alpha du PNG préserve nativement la transparence du SVG, ce qui est exactement ce que vous souhaitez pour les logos et icônes destinés à être placés sur différents arrière-plans. Exportez à n'importe quelle échelle et la transparence sera conservée intacte.

Il y a toutefois un piège classique. Un SVG peut sembler avoir un fond blanc dans un navigateur lorsque vous voyez en réalité la page derrière celui-ci. Avant de convertir, testez-le sur un fond sombre. Si la forme reste correctement visible, vous avez une vraie transparence ; si vous voyez un rectangle blanc, votre SVG contient un rectangle d'arrière-plan intégré.

Quand remplir un arrière-plan plutôt que de laisser la transparence : certaines plateformes et anciens outils ne gèrent pas bien la transparence. Pour ces téléchargements, un arrière-plan uni (généralement blanc) est le choix plus sûr.

Et si votre SVG contient un rectangle d'arrière-plan que vous ne souhaitez pas, supprimez-le dans votre fichier de conception avant l'exportation. Il s'agit d'une correction dans le fichier de conception, et non d'un paramètre de conversion.

Pièges qui font échouer les exports SVG

La plupart des conversions SVG en PNG se passent bien. Celles qui échouent le font généralement de l’une de ces trois manières :

• Polices. Le texte SVG est rendu à l’aide des polices disponibles sur la machine de rendu, conformément à la spécification SVG 1.1. Si le rasteriseur ne dispose pas de votre police, vous obtenez un remplacement de texte ou une mise en page cassée. La solution est simple : convertissez le texte en tracés (contours) dans votre logiciel de design avant d’exporter le SVG. C’est la cause la plus fréquente du « pourquoi mon logo a-t-il l’air incorrect en PNG ? ».
• Rognage. Certains convertisseurs tronquent la sortie selon la zone d’affichage déclarée du SVG, or le contenu SVG peut s’y étendre ; tout ce qui dépasse risque donc d’être perdu. Vérifiez qu’aucun élément important ne se trouve hors du canevas avant l’export.
• Filtres avancés. Le rendu des filtres et dégradés SVG varie selon les moteurs. Les rasteriseurs côté serveur les traitent différemment des navigateurs ; par exemple, ImageMagick délègue à librsvg si disponible, sinon il utilise son propre moteur moins performant. Les dégradés eux-mêmes se rasterisent proprement à n’importe quelle échelle (MDN), mais des chaînes de filtres complexes peuvent apparaître différentes de votre aperçu navigateur. Si cela arrive, simplifiez les effets ou pré-rasterisez-les dans votre outil de design.

Conversion en masse d’un jeu d’icônes

Un jeu d’icônes vit ou meurt selon sa cohérence. Un mélange de tailles, ou certaines icônes avec fond transparent et d’autres avec fond blanc, paraît bancal dans l’interface d’un produit ou d’une application, même si chaque fichier individuel est correct.

Définissez donc deux points dès le départ :

1. Une seule échelle. Le 2x pour le web est le choix habituel.
2. Une seule politique de fond. Généralement transparent, sauf si la destination ne gère pas l’alpha.

Appliquez ensuite ces deux règles à chaque fichier. La méthode pratique : téléchargez plusieurs SVG simultanément dans le convertisseur et exportez tout le lot à la même largeur et hauteur, plutôt que de convertir les fichiers un par un en dérivant progressivement.

Si vous avez besoin de plusieurs tailles à partir d’un même SVG source (par exemple 16, 32 et 512 px), réexportez depuis le SVG à chaque taille, ou passez le PNG par un redimensionneur d’images — n’agrandissez pas un petit PNG, cela ne ferait que le rendre flou.

Questions fréquentes, réponses regroupées ici

La conversion SVG vers PNG entraîne-t-elle une perte de qualité ?

Non, pas si vous exportez à la bonne taille. Les pixels du PNG sont générés à partir des calculs vectoriels, le résultat est donc aussi net que le SVG à cette résolution. La seule vraie perte concerne la flexibilité : le PNG reste figé à une taille pixel unique pour toujours.

Peut-on convertir un PNG en SVG ?

Pas proprement. Le traçage approxime la grille de pixels plutôt que de restaurer les tracés originaux, ce qui n’est jamais sans perte — les logos aux aplats de couleur se tracent correctement, tandis que les photos et dégradés se tracent mal. Conservez votre SVG original comme fichier maître et vous n’aurez pas besoin de traçage.

Quel fond utiliser ?

Transparent pour tout élément placé sur des arrière-plans variés, ce que le canal alpha du PNG gère nativement. N’ajoutez un fond uni (généralement blanc) que lorsque la destination ne prend pas en charge la transparence.