Pourquoi mon SVG paraît-il différent après conversion en PNG ?

Les raisons les plus courantes sont : (1) Le SVG utilise currentColor — activez l’option de remplacement currentColor et choisissez la couleur souhaitée. (2) Le SVG référence des polices externes qui ne sont pas disponibles pendant le rendu raster — l’outil vous avertit s’il détecte des références de polices externes, et le PNG retombera sur la police système. (3) Le SVG contient des images cross-origin — elles peuvent être bloquées par les règles de sécurité du navigateur, ce qui provoque des zones d’image manquantes. Dans tous les cas, l’outil affiche un avertissement coloré sur la ligne du fichier avant conversion.

Que signifient 1x / 2x / 3x et lequel choisir ?

Ce sont des échelles de densité de pixels. 1x correspond à la résolution de base pour les écrans standards. 2x fournit deux fois plus de pixels pour les écrans Retina/HiDPI (la plupart des téléphones et MacBook modernes). 3x fournit trois fois plus de pixels pour les écrans les plus denses (derniers iPhone, téléphones Android haut de gamme). Si vous exportez pour le web, choisissez 1x et 2x. Pour des ressources d’app iOS, cochez les trois. Vous pouvez sélectionner plusieurs échelles en même temps — l’outil exporte toutes les échelles choisies en un clic et les organise dans un ZIP.

Quelle est l’option DPI et quand dois-je l’utiliser ?

Le DPI (dots per inch, points par pouce) est une balise de métadonnées intégrée au PNG qui indique aux applications à quelle taille physique afficher l’image. Les dimensions en pixels du PNG exporté ne changent pas — seule la balise de métadonnées change. Utilisez 72 DPI pour les ressources web (standard du web). Utilisez 96 DPI pour les ressources écran sous Windows. Utilisez 144 DPI pour les ressources Apple @2x — macOS et iOS reconnaissent 144 DPI comme l’indicateur d’une image à l’échelle Retina, ce qui est utile lorsqu’on dépose les assets directement dans Xcode ou dans le Finder macOS. Laissez le DPI désactivé si vous n’avez pas d’exigence particulière, car les navigateurs web et la plupart des applications l’ignorent de toute façon.

Puis-je exporter avec un fond transparent ?

Oui — le fond transparent est l’option par défaut. Le PNG exporté conserve un canal alpha complet, préservant toute la transparence présente dans le SVG d’origine. Si la plateforme cible ne prend pas la transparence en charge (par exemple certains clients mail ou plateformes publicitaires), passez à l’option de fond blanc ou de couleur personnalisée.

Que se passe-t-il si mon SVG n’a pas d’attributs width ou height ?

Si le SVG possède un attribut viewBox mais pas de largeur ou hauteur explicite, l’outil déduit automatiquement les dimensions à partir du viewBox — aucun avertissement n’est affiché et la conversion continue normalement. Si le SVG n’a ni viewBox ni attributs width/height, l’outil utilise par défaut 300×150 pixels (le comportement par défaut du navigateur pour les SVG) et affiche un avertissement jaune sur la ligne du fichier afin que vous puissiez définir manuellement une taille de sortie personnalisée.

Qu’est-ce que currentColor et pourquoi mon icône s’exporte-t-elle en noir uni ?

currentColor est un mot-clé CSS utilisé dans les icônes SVG pour hériter de la couleur du texte de l’élément parent — cela rend les icônes adaptables au thème. Lors de l’export en PNG, il n’y a plus de contexte CSS, donc currentColor prend sa valeur par défaut dans le navigateur (noir). Activez l’option de remplacement currentColor et choisissez la couleur souhaitée — l’outil remplace toutes les références currentColor dans le code source SVG avant le rendu raster, pour que le PNG s’affiche exactement dans la couleur choisie.

Comment le fichier ZIP est-il organisé lors d’un export multi-échelle ?

Vous pouvez choisir entre deux structures de ZIP. Le mode dossiers crée des sous-dossiers séparés (1x/, 2x/, 3x/) avec le nom de fichier d’origine dans chacun — cela correspond aux conventions du catalogue d’assets Xcode et à la plupart des pipelines CI/CD. Le mode plat place tous les fichiers à la racine avec un suffixe d’échelle dans le nom (icon.png, icon@2x.png, icon@3x.png) — utile lorsque l’outil en aval attend un dossier d’assets plat. Les deux modes conservent les noms de fichiers d’origine.

BulkPicTools

Local · 0 téléversement

Convertir SVG en PNG — Gratuit, par lots, taille personnalisée et DPI

Convertissez des SVG en PNG en ligne — gratuit, sans envoi, avec prise en charge du traitement par lots. Définissez une taille personnalisée, l’arrière-plan, le DPI et exportez en 1x/2x/3x pour toutes les plateformes. Tout le traitement s’effectue en local.

Téléverser des fichiers SVG

Glissez-déposez des fichiers SVG ici, ou cliquez pour sélectionner. Téléversement par lots pris en charge.

Fond transparent • Export 1x/2x/3x • 100 % local

Outils associésConvertisseur HEIC vers JPG

Convertisseur d’images en masse

Convertisseur PNG en JPG

Convertisseur d’images vers JPG

Convertisseur d’images vers PNG

Convertisseur d’images vers WebP

Convertisseur WebP vers JPG

Fonctionnalités clés de Convertisseur SVG vers PNG

Taille de sortie flexible

Exportez à la taille SVG d’origine, définissez une largeur précise (mise à l’échelle proportionnelle) ou indiquez une largeur et une hauteur exactes. Cochez 1x, 2x et 3x simultanément pour exporter toutes les échelles en un clic.

Traitement par lots avec avertissements par fichier

Importez autant de fichiers SVG que nécessaire. Chaque fichier affiche ses dimensions d’origine et est automatiquement vérifié pour détecter les problèmes : taille manquante, polices externes, images cross-origin ou currentColor non résolu — avec des avertissements colorés avant la conversion.

Remplacement de currentColor

De nombreux SVG d’icônes utilisent currentColor pour s’adapter au thème. Activez l’option de remplacement et choisissez une couleur cible — l’outil remplace toutes les références currentColor avant le rendu raster, pour que le PNG s’affiche exactement comme prévu.

Contrôle du fond et du DPI

Fond transparent, blanc ou de n’importe quelle couleur personnalisée. Vous pouvez aussi intégrer des métadonnées DPI (72 / 96 / 144 pour la reconnaissance Apple @2x, ou une valeur personnalisée) afin que le PNG s’ouvre à la bonne taille physique dans Figma, Photoshop et les outils d’impression.

Guides et conseils

SVG vers PNG : quand utiliser chaque format

SVG et PNG répondent à des usages différents, et comprendre quand utiliser l’un ou l’autre rend la conversion plus pertinente.

SVG (Scalable Vector Graphics) est indépendant de la résolution — il s’affiche parfaitement à n’importe quelle taille, car il décrit des formes mathématiquement au lieu de stocker des pixels. Le SVG est idéal pour les logos, les icônes, les illustrations et tout élément qui doit s’afficher à plusieurs tailles. Le fichier est aussi un XML lisible par l’humain, ce qui signifie qu’il peut être stylé et animé avec CSS et JavaScript.

PNG (Portable Network Graphics) est un format raster — une grille fixe de pixels à une résolution donnée. Il prend en charge la compression sans perte et la transparence complète via canal alpha, ce qui en fait le standard pour les icônes web, les ressources d’applications et les images qui doivent apparaître sur des plateformes ne prenant pas en charge SVG (clients e-mail, certains CMS, anciennes applications).

Quand le PNG est le bon choix

Modèles d’e-mail — la plupart des clients mail ne rendent pas le SVG de façon fiable
Exigences des stores et des icônes d’OS — iOS, Android et macOS exigent du PNG à des dimensions précises
Téléversements sur les réseaux sociaux — les plateformes acceptent universellement le PNG, mais la prise en charge du SVG est inégale
Figma et transmission aux développeurs — les ressources PNG sont plus simples à utiliser pour les développeurs qui n’emploient pas d’outils SVG
Plateformes tierces — les CMS, plateformes publicitaires et outils d’analyse acceptent souvent le PNG mais pas le SVG

Exporter des icônes en 1x / 2x / 3x — ce que signifient les échelles

L’export PNG multi-échelle est le flux standard pour livrer des icônes et des ressources UI sur iOS, Android et le web.

Pourquoi plusieurs échelles existent

Les écrans des appareils modernes ont des densités de pixels différentes — un écran de téléphone peut intégrer 3 pixels physiques dans chaque pixel logique (3x / @3x). Si vous exportez seulement un PNG 1x et que vous l’affichez sur un écran Retina ou à haute densité, il paraîtra flou parce que le système d’exploitation l’agrandira. L’export en 2x et 3x fournit la densité de pixels supplémentaire dont l’appareil a besoin.

Conventions de nommage

1x — résolution de base, pour les écrans standards. Fichier : icon.png
2x (@2x) — densité double, pour les écrans Retina (la plupart des téléphones et MacBook modernes). Fichier : icon@2x.png
3x (@3x) — densité triple, pour les appareils Android haute densité et les iPhone les plus récents. Fichier : icon@3x.png

Structure du ZIP

Lorsque plusieurs échelles sont exportées, l’outil génère un ZIP avec des dossiers d’échelle (1x/, 2x/, 3x/) ou une structure plate avec suffixes — conformément aux conventions attendues par les catalogues d’assets Xcode, les dossiers drawable Android et les pipelines web.

DPI et reconnaissance Apple @2x

Définir le DPI à 144 permet à macOS et iOS d’identifier le PNG comme une ressource @2x — utile lorsque vous déposez les assets directement dans Xcode ou Finder. La valeur DPI ne change pas les dimensions en pixels ; elle écrit seulement une balise de métadonnées que les applications lisent pour déterminer la taille d’affichage prévue.

Gestion de currentColor dans les icônes SVG

currentColor est un mot-clé CSS qui indique à un élément SVG d’hériter la couleur de son remplissage ou de son contour depuis le contexte CSS environnant — généralement la couleur du texte (color) de l’élément parent. C’est la technique standard pour rendre les bibliothèques d’icônes adaptables au thème.

Lorsque vous intégrez un SVG en ligne dans du HTML, currentColor récupère la valeur color définie sur l’élément parent. Mais lors de l’export en PNG — un format raster statique — il n’existe plus de contexte CSS. Le navigateur résout alors currentColor avec sa valeur par défaut (généralement noir), ce qui peut ne pas correspondre au rendu voulu.

Comment fonctionne le remplacement

Avant le rendu raster, l’outil analyse le code source SVG et remplace chaque occurrence de currentColor (dans fill, stroke, stop-color et d’autres propriétés) par la couleur hexadécimale que vous avez indiquée. Le résultat est un PNG qui s’affiche exactement dans la couleur choisie, indépendamment du contexte CSS.

Quand l’activer

Votre icône apparaît entièrement noire ou invisible dans l’aperçu PNG
Vous exportez des icônes destinées à un fond coloré et vous voulez l’icône en blanc ou dans une couleur précise
Vous exportez des icônes pour une remise de maquette à un système de design où l’icône doit apparaître dans la couleur de la marque

L’outil détecte automatiquement les SVG contenant currentColor et affiche un badge d’information bleu sur la ligne du fichier — un rappel d’activer le remplacement si le rendu par défaut ne correspond pas à votre intention.

Conversion par lots de SVG en PNG pour les workflows de design

Le cas d’usage par lots le plus courant pour SVG vers PNG est l’export d’ensembles d’icônes. Un système de design typique peut contenir des centaines d’icônes SVG à exporter en PNG pour la documentation, les stores ou des plateformes qui ne prennent pas le SVG en charge.

Cas d’usage 1 — export d’icônes d’application iOS et macOS

Xcode exige des ressources PNG à des tailles précises pour les icônes d’application (1024×1024 pour l’App Store, plus des tailles plus petites pour d’autres contextes). Importez le SVG maître, définissez une largeur et une hauteur personnalisées, activez l’export 1x/2x/3x, réglez le DPI sur 144, puis téléchargez le ZIP. La structure des dossiers correspond à ce qu’attend le catalogue d’assets de Xcode.

Cas d’usage 2 — documentation d’un design system

Les sites de documentation d’icônes et les instances Storybook affichent souvent des aperçus PNG à côté d’exemples de code. Importez l’ensemble d’icônes, exportez en 24×24 (1x) et 48×48 (2x), puis téléchargez en ZIP. Tous les noms de fichiers sont conservés.

Cas d’usage 3 — ressources pour modèles d’e-mail

La plupart des clients mail (Outlook, Gmail mobile) ne rendent pas le SVG inline. Exportez vos icônes SVG en PNG à la taille exacte utilisée dans le modèle — généralement 24 px ou 32 px — avec un fond blanc ou transparent selon le design de l’e-mail.

Cas d’usage 4 — téléversements pour réseaux sociaux et plateformes publicitaires

Les plateformes publicitaires (Google Ads, Meta, LinkedIn) acceptent le PNG mais pas le SVG. Exportez votre logo ou icône aux dimensions requises avec la bonne couleur de fond (blanc pour les plateformes qui ne gèrent pas la transparence) en une seule opération par lots.

Comment utiliser

Importer des fichiers SVG

Glissez-déposez vos fichiers SVG ou cliquez pour les sélectionner. Chaque fichier affiche immédiatement un aperçu miniature, ses dimensions d’origine et les avertissements détectés (taille manquante, polices externes, currentColor).

Configurer la sortie

Définissez la taille de sortie (originale / largeur / personnalisée) et sélectionnez les échelles d’export (1x, 2x, 3x — plusieurs choix possibles). Choisissez le fond, activez le remplacement de currentColor si nécessaire, et ajoutez éventuellement les métadonnées DPI.

Convertir et télécharger

Cliquez sur Convertir. Téléchargez les PNG individuellement depuis chaque ligne de fichier, ou téléchargez tout en ZIP — avec des dossiers d’échelle (1x/, 2x/, 3x/) ou une structure plate avec suffixes d’échelle (@2x, @3x).

Questions fréquemment posées sur Convertisseur SVG vers PNG

Tout le traitement s’effectue localement dans votre navigateur à l’aide de l’API Canvas. Vos fichiers SVG ne sont jamais téléversés vers un serveur. Cela signifie que vos fichiers restent privés, que la conversion fonctionne hors ligne après le chargement de la page, et qu’il n’y a aucune limite de taille imposée par un téléversement serveur.