Pour convertir un SVG en PNG en haute résolution, vous ne modifiez pas le SVG. Vous le rastérisez à une échelle plus grande : rendez le même vecteur à 2x, 3x ou 4x sa taille CSS afin que le PNG ait suffisamment de pixels pour rester net sur les écrans Retina et à l'impression. Un SVG est infiniment net car il s'agit de mathématiques, mais un PNG est une grille fixe de pixels, donc la seule décision qui contrôle la netteté est l'échelle d'exportation. Obtenez la bonne échelle et le résultat sera parfaitement net. Faites une erreur et vous livrerez un logo flou.
La plupart des convertisseurs cachent cela. Ils vous donnent un PNG à 1x et considèrent le travail terminé, puis votre icône semble molle sur un écran MacBook et floue dans une présentation imprimée. Ce guide explique la convention d'échelle Retina, le choix entre 96 et 300 DPI, la transparence et le piège de la police qui ruine les exportations, puis vous montre exactement comment faire en quelques secondes.
Pourquoi votre PNG exporté est flou#
Un graphique vectoriel n'a pas de résolution. Le même cercle SVG est lisse à 16px ou 16 000px car le navigateur recalcule la courbe à chaque affichage. En le rastérisant en PNG, vous le figez dans une grille de pixels à une seule taille. Par la suite, l'agrandissement ne fait qu'étirer les pixels existants, ce qui provoque le flou.
Le flou provient presque toujours de l'une de ces causes :
- Vous avez exporté en 1x et l'écran est Retina. Un écran Retina intègre deux ou trois pixels physiques dans chaque pixel CSS. Un PNG en 1x est étiré pour remplir cet espace, rendant un logo de 100px flou.
- Vous avez exporté en petit format puis agrandi. En faisant passer un PNG de 200px à 600px dans un outil de design ou un navigateur, des pixels jamais capturés sont interpolés. Aucun détail ne peut être récupéré.
- Le PNG correspond à votre fenêtre d'affichage mais pas à l'appareil. Il semble net sur votre moniteur, mais flou sur un téléphone ou un écran 4K où la densité de pixels est plus élevée.
Règle clé : ne jamais agrandir un PNG après l'exportation. Re-rastérisez toujours le SVG à la taille souhaitée. Le vecteur conserve tous les détails, pas le PNG.
La solution est d'exporter à la densité de pixels de l'appareil le plus exigeant que vous ciblez. Pour les écrans modernes, cela signifie au moins 2x. Pour l'impression, cela correspond au DPI, que nous abordons ci-dessous.
Convertir SVG en PNG Haute Résolution : Échelles 1x/2x/3x#
Voici ce que les convertisseurs génériques n'expliquent jamais, et c'est pourtant l'essentiel. Les nombres 1x, 2x et 3x sont des facteurs d'échelle. Ils multiplient la taille intrinsèque (CSS) du SVG pour obtenir les dimensions réelles en pixels du PNG.
Supposons que votre SVG soit conçu pour s'afficher à 256 par 256 pixels CSS. Voici ce que produit chaque échelle.
| Échelle | Cas d'usage | Sortie pour un SVG de 256px | Convention de nommage |
|---|---|---|---|
| 1x | Écrans non retina / anciens | 256 x 256 px | logo.png |
| 2x | Retina standard (la plupart des laptops, smartphones récents) | 512 x 512 px | [email protected] |
| 3x | Smartphones haute densité (iPhone récents, Android haut de gamme) | 768 x 768 px | [email protected] |
| 4x | Écrans 4K/5K, grandes images hero, marge de sécurité | 1024 x 1024 px | [email protected] |
Les suffixes @2x et @3x ne sont pas décoratifs. iOS, macOS et de nombreux frameworks web les lisent et servent automatiquement la bonne densité à l'appareil approprié. Si vous exportez des assets d'application ou d'interface, nommez-les ainsi et la plateforme fait le reste.
Quelle échelle choisir concrètement ?#
Un arbre de décision simple pour une utilisation à l'écran :
- Image web ou icône qui doit être nette partout ? Exportez en 2x comme base. Cela couvre la grande majorité des laptops retina et des smartphones sans inconvénient majeur, si ce n'est un fichier légèrement plus volumineux.
- Icône d'application ou ensemble d'assets ? Exportez en 1x, 2x et 3x et fournissez les trois avec les bons suffixes. Le système choisit par appareil.
- Image hero unique ou carte pour les réseaux sociaux ? Optez pour le 2x, voire le 3x. Les pixels supplémentaires sont une assurance peu coûteuse, et le PNG compresse bien les illustrations vectorielles plates.
Si vous ne retenez qu'une chose : en cas de doute, doublez. Un PNG en 2x sur un écran 1x gaspille un peu de bande passante. Un PNG en 1x sur un écran 2x semble cassé. La pénalité est déséquilibrée, donc privilégiez la haute résolution.
DPI : 96 pour l'écran, 300 pour l'impression#
Le DPI (points par pouce) est le point de divergence entre l'écran et l'impression, et il sème la confusion car le DPI ne signifie rien tant que l'image n'est pas imprimée. Sur un écran, les pixels sont des pixels : un PNG de 1000 px de large fait 1000 px de large, quelle que soit la balise DPI qu'il porte. L'impression est différente. Une imprimante a besoin de savoir combien de ces pixels tiennent dans un pouce physique, et c'est ce que contrôle le DPI.
| Cible | DPI | Pourquoi |
|---|---|---|
| Écran / web | 72 ou 96 | L'affichage ignore le DPI ; seul le nombre de pixels compte |
| Impression standard | 300 | Standard industriel pour un rendu net sur papier |
| Grand format (affiches, bannières) | 150 | Vu de loin, donc moins de points par pouce suffisent |
| Beaux-arts / petits détails | 600 | Netteté maximale pour les petits caractères et les détails |
Voici ce qui piège beaucoup de monde. Pour obtenir un logo imprimé net de 4 pouces de large à 300 DPI, vous avez besoin d'un PNG de 4 x 300 = 1200 pixels de large. La balise DPI seule ne fait rien. Ce sont les pixels qui comptent. Donc « exporter à 300 DPI » signifie en réalité « générer suffisamment de pixels pour la taille physique à 300 points par pouce ».
Attention : définir les métadonnées DPI d'un PNG à 300 sans augmenter ses dimensions en pixels n'améliore pas la qualité d'impression. Cela ne change qu'un nombre dans l'en-tête du fichier. L'image sera imprimée petite ou pixelisée. Ce sont les pixels qui importent ; le DPI indique simplement à l'imprimante comment les espacer.
Comme un SVG est un vecteur, vous ne perdez jamais en qualité en l'agrandissant. Rendez-le à la dimension en pixels requise par votre format d'impression et les bords restent parfaitement nets. C'est la raison pour laquelle les designers conservent les logos en SVG et les pixellisent à la demande. Un outil côté navigateur comme le convertisseur SVG en PNG gratuit vous permet de définir un DPI personnalisé et une taille de sortie exacte, afin de produire ce fichier prêt à imprimer de 1200 px sans ouvrir de logiciel lourd.
Conserver le fond transparent#
Les SVG sont généralement transparents par défaut. Le piège est que de nombreux convertisseurs aplatissent cette transparence en un fond blanc lors de la rastérisation, ce qui ruine un logo destiné à être placé sur un en-tête coloré ou une photo.
Le PNG prend en charge un canal alpha complet, donc la transparence est parfaitement conservée si le convertisseur la respecte. Voici ce qu'il faut vérifier avant de faire confiance à un export :
- Pas de fond de remplissage SVG. Assurez-vous que votre racine SVG n'a pas de
filloubackgrounddéfini sur l'élément extérieur, sinon vous intégrerez cette couleur. - Le convertisseur préserve l'alpha. Un export PNG correct conserve les zones vides (damier) transparentes, pas blanches.
- Bords anti-aliasés sur la transparence. Les bons convertisseurs adoucissent les pixels de bord pour que les courbes se fondent harmonieusement dans l'arrière-plan du PNG, au lieu de laisser un halo irrégulier.
Si vous avez spécifiquement besoin d'un fond solide, c'est un choix délibéré que vous définissez, pas une valeur par défaut imposée par l'outil. L'essentiel est le contrôle : transparent quand vous le souhaitez, une couleur choisie quand vous ne le voulez pas.
Convertir le texte en tracés avant de pixelliser#
C'est la raison la plus courante pour laquelle un PNG exporté semble incorrect, et presque aucun article sur la conversion ne le mentionne. Lorsqu'un navigateur ou un convertisseur pixellise un SVG contenant des éléments <text> en direct, il a besoin que la police exacte soit disponible pour dessiner les glyphes. Votre outil de conception avait la police. Le serveur ou le navigateur effectuant l'exportation ne l'a peut-être pas, donc le texte utilise une police de remplacement ou disparaît complètement.
La solution consiste à convertir le texte en contours (également appelés tracés ou courbes) avant l'exportation. Cela transforme chaque lettre en une forme vectorielle qui n'a besoin d'aucune police, de sorte qu'elle s'affiche de manière identique partout.
Comment vectoriser le texte dans les outils courants :
- Figma : sélectionnez le texte, faites un clic droit, puis Contour / aplatir, ou utilisez le raccourci clavier pour vectoriser.
- Illustrator : sélectionnez le texte, puis menu Texte, puis Créer des contours (Shift+Cmd+O).
- Inkscape : sélectionnez le texte, puis menu Chemin, puis Objet en chemin (Shift+Ctrl+C).
Une fois le texte vectorisé, le SVG est entièrement autonome et votre PNG affichera les bonnes lettres à n'importe quelle échelle. L'inconvénient est que le texte vectorisé n'est plus modifiable en tant que texte, alors conservez un fichier maître modifiable et vectorisez uniquement la copie d'exportation.
Comment convertir un SVG en PNG en haute résolution#
Voici le flux de travail complet, du début à la fin, en utilisant un convertisseur côté navigateur afin que rien ne soit téléchargé sur un serveur.
Étape 1 : Déterminez votre taille cible et votre échelle#
Calculez la plus grande taille à laquelle le PNG doit s'afficher, puis multipliez pour la rétine. Pour une icône d'interface de 256 px, prévoyez du 2x (512 px) ou du 3x (768 px). Pour une impression de 5 pouces à 300 DPI, il vous faut 1500 px. Notez les dimensions finales en pixels avant d'exporter pour viser un nombre précis, sans avoir à deviner.
Étape 2 : Vectorisez tout texte dans le SVG#
Si le SVG contient du texte brut, convertissez-le en tracés dans votre outil de conception d'abord (voir la section ci-dessus). Ignorez cette étape et vous risquez des polices manquantes ou substituées lors de l'export. Pour les SVG de formes pures ou d'icônes sans texte, passez à l'étape suivante.
Étape 3 : Chargez le SVG dans le convertisseur#
Ouvrez le convertisseur SVG en PNG et déposez votre fichier ou collez le code SVG. Comme il s'exécute dans votre navigateur, le fichier ne quitte jamais votre appareil, ce qui est important pour les logos non publiés et les travaux clients sous NDA.
Étape 4 : Définissez l'échelle, le DPI et l'arrière-plan#
Choisissez votre échelle (2x, 3x ou une taille personnalisée) et le DPI (96 pour l'écran, 300 pour l'impression). Confirmez que l'arrière-plan est transparent, sauf si vous souhaitez un remplissage. Faites correspondre les dimensions exactes en pixels que vous avez notées à l'étape 1.
Étape 5 : Exportez et vérifiez sur l'appareil réel#
Téléchargez le PNG, puis vérifiez-le là où il sera réellement utilisé. Affichez la version écran sur un écran rétina à 100 % de zoom. Pour l'impression, zoomez à 100 % dans un visualiseur et confirmez que les bords et les petits textes restent nets. Si l'image semble floue, votre échelle était trop faible. Réexportez en plus grand ; ne jamais agrandir le PNG.
Erreurs courantes qui nuisent à la qualité#
Quelques erreurs récurrentes sont responsables de la plupart des exports flous ou cassés.
- Exporter en 1x pour un public habitué à la rétine. Par défaut, choisissez 2x. Le coût en bande passante est faible, le gain en netteté ne l'est pas.
- Agrandir le PNG au lieu de réexporter le SVG. Une fois pixellisé, le détail est figé. Revenez au vecteur et exportez en plus grand.
- Faire confiance aux métadonnées DPI pour corriger une petite image. Le DPI sans pixels est un placebo. Ajoutez de vrais pixels pour une netteté d'impression réelle.
- Oublier de vectoriser les polices. Les exports avec polices manquantes sont silencieux et faciles à manquer jusqu'à ce qu'un client signale la mauvaise typographie.
- Laisser le convertisseur aplatir la transparence en blanc. Vérifiez que le canal alpha a survécu avant de remettre le fichier.
Pour les icônes d'applications et les favicons, il est généralement préférable d'avoir un ensemble carré multi-tailles plutôt qu'un seul gros PNG. Un générateur de favicons dédié produit les tailles exactes attendues par les navigateurs et les appareils (16px, 32px, 180px et plus) à partir d'une seule source, ce qui vous évite d'exporter chaque échelle manuellement. Et lorsque vous devez prendre un raster existant et produire des dimensions fixes propres, le redimensionneur d'images le fait sans le flou d'agrandissement. Si vous souhaitez un contexte plus large sur le flux de travail de conception, notre guide pour les designers sur l'utilisation d'un convertisseur SVG en PNG approfondit les pipelines d'actifs réels.
L'essentiel#
Pour convertir un SVG en PNG en haute résolution, la seule variable qui compte vraiment est l'échelle d'exportation : affichez le vecteur en 2x ou 3x pour les écrans Retina, et au nombre réel de pixels correspondant à votre taille physique à 300 DPI pour l'impression. Gardez l'arrière-plan transparent, vectorisez vos polices avant le tramage, et ne montez jamais en résolution un PNG terminé. Comme la source est un vecteur, vous pouvez le restituer à n'importe quelle taille sans perte de qualité, donc visez toujours haut et doublez en cas de doute. Ainsi, vos logos, icônes et graphismes restent nets sur tous les écrans et sur papier.
Foire aux questions#
Comment convertir un SVG en PNG en haute résolution sans perte de qualité ? Rendez le SVG à une plus grande échelle plutôt que de redimensionner un PNG terminé. Comme un SVG est vectoriel, l'exporter en 2x, 3x ou à n'importe quelle taille personnalisée produit des bords parfaitement nets à chaque fois. La qualité ne souffre que si vous pixellisez trop petit et étirez le PNG ensuite, alors définissez vos dimensions cibles en pixels avant d'exporter.
Quelle échelle utiliser pour les écrans Retina ?
Utilisez 2x comme valeur par défaut sûre, ce qui couvre la plupart des ordinateurs portables Retina et des téléphones modernes. Pour les téléphones à haute densité, exportez également une version 3x. Si vous fournissez des ressources d'application, proposez des fichiers 1x, 2x et 3x avec les suffixes @2x et @3x pour que le système d'exploitation serve automatiquement la bonne densité à chaque appareil.
Quel DPI faut-il pour convertir un SVG en PNG pour l'impression ? Utilisez 300 DPI pour une impression standard et assurez-vous que le PNG a suffisamment de pixels réels pour la taille physique. Un logo de 4 pouces de large à 300 DPI nécessite un PNG de 1200 pixels de large. Définir la balise DPI seule sans augmenter les dimensions en pixels ne sert à rien, car l'imprimante a besoin de pixels réels pour placer l'encre avec netteté.
Pourquoi mon PNG exporté a-t-il un fond blanc au lieu d'être transparent ? Le convertisseur a aplani la transparence du SVG lors de la pixellisation. Le PNG prend entièrement en charge la transparence via son canal alpha, donc une exportation correcte conserve les zones vides transparentes. Vérifiez que votre SVG n'a pas de fond sur l'élément racine et utilisez un convertisseur qui préserve l'alpha, comme l'outil SVG vers PNG côté navigateur de Molixa.
Pourquoi le texte de mon PNG est-il manquant ou dans la mauvaise police ? Le moteur de rendu ne disposait pas de la police référencée par votre SVG, il l'a donc remplacée ou supprimée. Convertissez le texte en contours (chemins) dans votre outil de conception avant d'exporter, ce qui transforme les lettres en formes vectorielles qui n'ont besoin d'aucune police. Le SVG s'affiche alors de manière identique partout, à n'importe quelle échelle.
Puis-je convertir un SVG en PNG en ligne sans télécharger mon fichier ? Oui. Un convertisseur côté navigateur effectue la pixellisation localement dans votre navigateur, de sorte que le SVG ne quitte jamais votre appareil. Cela est important pour les logos non publiés, les travaux clients sous NDA et tout actif sensible. Le convertisseur SVG vers PNG de Molixa fonctionne entièrement dans le navigateur et prend en charge l'échelle personnalisée, le DPI et la transparence.
