Conversion SVG en PNG en ligne, gratuite

SVG ou PNG

SVG (Scalable Vector Graphics) est un format vectoriel, du balisage XML qui décrit des formes mathématiquement. Un cercle en SVG, c'est « dessiner un cercle de rayon R en (x, y) avec la couleur de remplissage F », des instructions, pas des pixels. Le navigateur rend les instructions à la taille à laquelle vous affichez le SVG, donc il reste net à 1x, 2x, 3x et au-delà. PNG (Portable Network Graphics) est un format raster, une grille fixe de pixels avec des valeurs de couleur fixes. PNG est ce que vous obtenez lorsque vous « gelez » un SVG à une résolution spécifique. Convertir un SVG en PNG s'appelle rastérisation : choisir une grille de pixels cible et rendre les instructions vectorielles à cette taille fixe, après quoi le résultat est une image raster normale avec toutes les contraintes de taille que cela implique.

SVG a été développé par le SVG Working Group du W3C fondé en 1998 ; SVG 1.0 est devenu une Recommandation W3C le 4 septembre 2001 ; SVG 1.1 a suivi le 14 janvier 2003 et a été la version dominante pendant la décennie suivante ; SVG 1.1 Seconde Édition est arrivé le 16 août 2011 ; SVG 2 a atteint le statut de Candidate Recommendation le 4 octobre 2018 mais est resté bloqué, il demeure CR plutôt que pleine Recommandation en 2026. PNG est devenu une Recommandation W3C le 1er octobre 1996 et IETF RFC 2083 en mars 1997 ; le format est stable depuis.

Pourquoi convertir un SVG en PNG ?

• Clients e-mail abandonnant la prise en charge SVG. Microsoft a commencé à retirer la prise en charge du SVG inline dans Outlook pour le web et le nouvel Outlook pour Windows à partir de septembre 2025, le déploiement s'étant achevé en octobre 2025, les SVG inline s'affichent désormais comme un espace vide. Les pièces jointes SVG fonctionnent encore, mais les modèles d'e-mail à style inline qui intégraient auparavant des logos SVG ont besoin de fallbacks PNG. L'interface web Gmail rend bien le SVG ; Apple Mail aussi ; la rupture majeure est du côté Microsoft.
• Plateformes de médias sociaux. Twitter/X, Instagram, Facebook, LinkedIn rejettent purement les téléversements SVG ou les compressent et ré-encodent en PNG/JPEG avant affichage. Pré-rastériser aux dimensions préférées de la plateforme (1200x630 pour Open Graph, 1080x1080 pour Instagram) contourne leur conversion auto avec perte.
• Génération d'icônes d'application. Les icônes d'app iOS doivent être en PNG 1024x1024 (fiche App Store) plus diverses tailles spécifiques aux appareils ; les icônes adaptatives Android s'affichent dans le launcher en 432x432 (108dp en xxxhdpi) avec 512x512 pour la fiche Play Store ; les icônes de manifeste PWA exigent généralement 192x192 et 512x512. Le SVG n'est accepté par aucun d'entre eux.
• Impression à la demande et prépresse. Printful, Redbubble, Society6, RedPrint et la plupart des services d'impression à la demande exigent du PNG (ou PDF) à des résolutions spécifiques, généralement 300 DPI pour la taille physique cible. Le SVG n'est pas accepté dans leurs flux de téléversement.
• CMS et applications anciens. Les anciennes installations WordPress, les outils admin hérités, les éditeurs de documents antérieurs à la prise en charge SVG par le navigateur, partout où « doit être PNG » est une exigence stricte.
• Émojis Discord et similaires. Le téléversement d'émojis personnalisés Discord exige PNG (ou GIF animé pour émojis animés) ; taille recommandée 128x128 avec un plafond de taille de fichier de 256 Ko. Le SVG n'est pas accepté.

Comment la conversion fonctionne dans votre navigateur

La technique de rastérisation via l'API Canvas est simple mais comporte des subtilités. Le pipeline standard : charger le SVG comme élément Image via une URL Blob (URL.createObjectURL(svgBlob)) ou directement comme data URI (data:image/svg+xml;base64,...) ; attendre l'événement onload ; créer un canvas aux dimensions de sortie souhaitées ; appeler ctx.drawImage(image, 0, 0, width, height) pour rastériser le SVG à la taille choisie ; exporter via canvas.toBlob('image/png'). Les moteurs de rendu SVG des navigateurs gèrent correctement les dégradés, masques, filtres, texte et la plupart de l'ensemble des fonctionnalités SVG pendant cette rastérisation. Trois mises en garde comptent. Les ressources externes échouent sous CORS : les SVG qui référencent des images externes (<image href="https://other-domain.com/photo.jpg">) ou des polices externes peuvent ne pas se charger si le serveur cross-origin ne renvoie pas les en-têtes CORS appropriés, le canvas devient « contaminé » et toBlob lance une SecurityError. Intégrez les images comme data URI et les polices comme @font-face avec src en data URI pour éviter cela. Les SVG contenant des balises <script> ne s'exécutent pas lorsqu'ils sont chargés comme Image, le décodeur d'image du navigateur supprime le contexte de scripting pour des raisons de sécurité. Les animations SMIL sont aplaties en une seule image à time=0 ; si le SVG dépend de l'animation pour son état visuel, le PNG rastérisé ne le capturera pas. Différences de pixels entre navigateurs : Chrome, Firefox et Safari produisent une sortie rastérisée subtilement différente pour le même SVG en raison de différences dans leurs moteurs de rendu vectoriel respectifs ; pour les icônes de production, rendez une fois et livrez le PNG plutôt que de compter sur la conversion par navigateur à l'exécution.

Choisir la bonne résolution de sortie

Le SVG n'a pas de résolution inhérente, le choix vous appartient. Cibles courantes : icône de fiche iOS App Store 1024x1024 ; icône de fiche Android Play Store 512x512 (avec l'icône adaptative dans le launcher à 432x432, conçue dans une zone de sécurité 264x264) ; icônes de manifeste PWA 192x192 et 512x512 ; favicon historiquement 16x16, 32x32, 48x48 (le favicon.ico moderne regroupe les trois tailles ; la meilleure pratique moderne livre icon.svg pour les navigateurs qui le prennent en charge plus un fallback apple-touch-icon.png 192x192) ; carte sociale Open Graph 1200x630 ; carte Twitter 1200x675 ; carré Instagram 1080x1080 ; émoji Discord 128x128 ; émoji Slack 128x128 ; impression à 300 DPI nécessite 3x la dimension en pouces en pixels (une impression de logo de 4 pouces nécessite 1200x1200). Pour un rendu écran qualité Retina, visez 2x la taille affichée, une icône affichée 100x100 devrait être exportée en 200x200 pour rester nette sur les écrans Retina.

Comment utiliser ce convertisseur

1. Fournissez le SVG. Déposez un fichier .svg sur la zone de téléversement, ou collez du balisage SVG brut dans la zone de texte. Les deux voies fonctionnent de la même façon.
2. Définissez les dimensions de sortie. Largeur et hauteur en pixels ; le bouton verrouillage du rapport d'aspect maintient les proportions quand vous changez une dimension. Maximum 8192x8192 (la limite de taille canvas sur la plupart des navigateurs modernes ; certains matériels plafonnent à 4096 ou 8192).
3. Choisissez un fond. Transparent (par défaut, préserve le canal alpha du SVG), blanc plein, noir plein, ou n'importe quelle couleur personnalisée. Utile lorsque la destination ne prend pas en charge la transparence (certains contextes d'impression hérités).
4. Convertissez et téléchargez. Le bouton Convertir rastérise le SVG à la taille choisie et affiche l'aperçu ; Télécharger enregistre le PNG sur votre appareil.

Périmètre honnête : ce que cet outil fait et ne fait pas

Cet outil rastérise un seul SVG en un seul PNG à la taille choisie. Il ne génère pas le jeu d'icônes multi-tailles complet que les boutiques d'applications exigent (1024x1024 + 180x180 + 167x167 + 152x152 + 120x120 + 87x87 + 80x80 + 60x60 + 58x58 + 40x40 + 29x29 + 20x20 pour iOS seul), pour cela, utilisez un outil dédié comme RealFaviconGenerator ou App Icon Generator. Il n'optimise pas le PNG résultant (utilisez l'outil SVG Optimizer pour nettoyer d'abord le SVG source ; pour l'optimisation PNG utilisez un compresseur séparé). Il ne regroupe pas la sortie favicon.ico multi-tailles. Il n'anime pas, les PNG exportés sont en image unique, même si le SVG avait une animation SMIL. Pour la génération par lots de plusieurs tailles à partir d'un SVG, utilisez une CLI comme sharp-cli (Node.js) ou resvg-cli (Rust) ; la conversion par taille qu'ils effectuent est la même que cet outil, juste scriptable.

Confidentialité : pourquoi le tout-navigateur compte ici

Les fichiers SVG contiennent souvent des actifs de marque propriétaires, des logos en cours de travail, des icônes de produits internes ou des fichiers sources fournis par un designer sous NDA. Les services de conversion côté serveur (CloudConvert, Online-Convert, Convertio) téléversent votre SVG sur leur infrastructure où il reste dans les logs. Cet outil exécute tout le pipeline de rastérisation dans votre navigateur via l'API Canvas, vérifiez dans l'onglet Réseau de DevTools pendant que vous cliquez sur Convertir, ou mettez la page hors ligne (mode avion) après son chargement et le convertisseur fonctionne toujours. Sûr pour le travail de marque non publié, les icônes de produits internes, les fichiers de designer sous NDA ou tout SVG que vous ne voudriez pas voir copié sur le disque dur d'un étranger.

Questions fréquentes

Pourquoi convertir SVG en PNG au lieu d'utiliser SVG directement ?

Pour la plupart des navigateurs modernes, vous n'avez pas à le faire. Le SVG s'affiche nativement dans Chrome, Firefox, Safari, Edge et Opera, et est le bon format pour la plupart des usages web. La conversion est nécessaire lorsque la destination ne prend pas en charge le SVG : Microsoft a retiré le SVG inline dans Outlook web et le nouvel Outlook pour Windows en septembre-octobre 2025 ; les icônes d'app iOS / Android doivent être en PNG ; les services d'impression à la demande exigent PNG ; le téléversement d'émojis personnalisés Discord et Slack en PNG ; certains CMS hérités rejettent encore les téléversements SVG. Pour ces contextes, vous rastérisez une fois et livrez le PNG.

À quelle résolution dois-je exporter ?

Correspondez à la destination. Fiche iOS App Store : 1024x1024. Play Store Android : 512x512 (icône adaptative dans le launcher : 432x432). Manifeste PWA : 192 et 512. Carte sociale Open Graph : 1200x630. Carré Instagram : 1080x1080. Pour les écrans Retina, exportez à 2x la taille CSS affichée, une icône 100x100 devrait être PNG 200x200 pour rester nette. Pour l'impression, 300 DPI signifie 300 pixels par pouce affiché (une impression de logo de 4 pouces = PNG 1200x1200). Le maximum ici est 8192x8192, qui est la limite canvas du navigateur moderne.

Pourquoi mon SVG est-il incomplet après conversion ?

Trois causes courantes. Ressources externes bloquées par CORS : si le SVG référence des images ou des polices sur un autre domaine qui ne renvoie pas d'en-têtes CORS appropriés, le canvas devient « contaminé » et l'export les abandonne silencieusement. Intégrez les images comme data URI et les polices comme @font-face avec src en data URI. Les scripts à l'intérieur du SVG ne s'exécutent pas : les balises <script> sont supprimées par le modèle de sécurité du décodeur d'image du navigateur, tout ce que le script génère n'apparaîtra pas. Les animations SMIL s'affichent à time=0 (l'image de départ) ; l'état visuel animé n'est pas capturé. Pour les SVG qui dépendent de JavaScript ou de l'animation, rendez d'abord dans un vrai navigateur puis faites une capture d'écran, ou utilisez Puppeteer en headless.

Préserve-t-il la transparence ?

Oui lorsque « Transparent » est sélectionné comme fond, le PNG conserve le canal alpha du SVG, avec les pixels semi-transparents entièrement préservés. Choisissez une couleur pleine (blanc, noir, personnalisée) lorsque la destination ne prend pas en charge la transparence ou quand vous avez besoin d'une couleur d'arrière-plan spécifique cuite dans (certains contextes d'impression hérités).

Puis-je générer plusieurs tailles à partir d'un SVG ?

Pas en un clic, cet outil produit un PNG unique par conversion. Pour la génération d'un jeu d'icônes pour les boutiques d'applications (la dizaine de tailles qu'iOS et Android exigent), utilisez un outil dédié comme RealFaviconGenerator (web), App Icon Generator (web), ou une CLI comme sharp-cli (Node.js) ou resvg-cli (Rust), la conversion par taille qu'ils effectuent est la même rastérisation style Canvas, juste scriptée sur de nombreuses tailles.

Mes fichiers SVG sont-ils téléversés ?

Non. La rastérisation s'exécute entièrement dans votre navigateur via l'API Canvas. Votre SVG et le PNG résultant ne traversent jamais le réseau, vérifiez dans l'onglet Réseau de DevTools pendant que vous cliquez sur Convertir, ou mettez la page hors ligne (mode avion) après son chargement et le convertisseur fonctionne toujours. Sûr pour le travail de marque non publié, les icônes de produits internes, les fichiers sources de designer sous NDA ou tout SVG que vous ne voudriez pas voir copié sur le disque dur d'un étranger.

Outils associés