Convertisseur SVG vers PNG

À Propos de la Conversion SVG vers PNG

Convertir SVG en PNG transforme une description vectorielle indépendante de la résolution en une image matricielle à résolution fixe. SVG utilise XML pour stocker des primitives géométriques — chemins, cercles, dégradés, texte — qui s'adaptent nettement à toute taille ; PNG stocke une grille finie de pixels. Le processus de conversion s'appelle la rastérisation : le navigateur analyse le balisage SVG, exécute le CSS intégré et les recherches de polices, calcule la géométrie aux dimensions de sortie choisies, et écrit les données pixel résultantes dans un conteneur PNG, JPEG ou WebP. Cet outil exécute tout le pipeline localement via l'API Canvas, prend en charge les fonds transparents, des dimensions personnalisées jusqu'à 4096 pixels et un curseur de qualité pour les sorties avec perte. Voyez aussi notre PNG vers SVG et WebP en PNG/JPG.

Pourquoi convertir SVG en PNG — SVG n'est-il pas meilleur ?

SVG surpasse PNG partout où il est pris en charge : il s'adapte à l'infini, le fichier est généralement plus petit pour les icônes et logos, vous pouvez animer les chemins avec CSS, et les lecteurs d'écran peuvent extraire le texte pour l'accessibilité. Mais la prise en charge SVG échoue dans de nombreux endroits du monde réel. Les clients de messagerie (Outlook, Gmail en mode sombre, Apple Mail mobile) suppriment fréquemment les pièces jointes SVG ou bloquent complètement le SVG en ligne. WebView ancien Android, les applications de lecture Kindle, le presse-papiers Word/PowerPoint, les uploads de réseaux sociaux (Twitter/X, Instagram, LinkedIn), les pilotes d'imprimante et les outils de conception de produits comme Etsy ou Printful exigent une entrée matricielle. Convertissez en PNG chaque fois que vous traversez l'un de ces environnements — gardez le SVG maître pour tout ce qui le prend en charge.

Comment PNG gère-t-il la transparence par rapport à JPEG et WebP ?

PNG-24 prend en charge un canal alpha 8 bits, permettant 256 niveaux de transparence par pixel — parfait pour les logos, icônes et éléments d'UI qui doivent se fondre sur des arrière-plans arbitraires. JPEG ne prend pas du tout en charge la transparence ; tout pixel SVG transparent devient la couleur de fond que vous avez spécifiée, généralement blanc. WebP prend en charge le même alpha 8 bits que PNG mais généralement avec une taille de fichier 25-50% plus petite grâce à son algorithme de compression plus récent. Pour le plus petit raster transparent, choisissez WebP si vos spectateurs utilisent des navigateurs modernes (Chrome 32+, Safari 16+, Firefox 65+) ; pour une compatibilité maximale (y compris les clients de messagerie anciens et les logiciels de conception), choisissez PNG. N'utilisez jamais JPEG pour les graphiques avec des régions transparentes à moins que vous ne souhaitiez spécifiquement un fond coloré.

À quelle résolution dois-je exporter mon SVG ?

Correspondez à votre plus grand écran cible. Pour les héros web sur les écrans Retina/HiDPI, rendez à 2x ou 3x la taille en pixels CSS : un héros 600px a besoin d'un PNG 1800px pour rester net sur un iPhone 3x. Pour les icônes d'application, suivez les directives de plateforme : iOS exige un maître de 1024px, Android 512px, les favicons sont généralement multi-tailles 16/32/48/180/192/512px. Pour l'impression, multipliez les pouces par 300 DPI : un logo de 4 pouces imprimé à 300 DPI nécessite un PNG de 1200px. Pour les emojis Slack et autocollants Discord, PNG 256px est le maximum. En cas de doute, choisissez la taille plus grande — réduire est bon marché, mais agrandir un PNG trop petit introduit un flou qu'aucun logiciel ne peut corriger.

Pourquoi mon SVG avec polices intégrées s'affiche-t-il avec le mauvais texte ?

Les SVG référencent les polices par nom de famille (font-family="Helvetica") au lieu d'incorporer les données de police. Pendant la rastérisation, le navigateur recherche Helvetica sur votre système ; s'il manque, le navigateur substitue une alternative (souvent Times ou DejaVu Sans), et le PNG rastérisé fige la mauvaise police. Solutions par ordre de fiabilité : (1) convertissez le texte en chemins dans votre éditeur SVG avant d'exporter depuis Illustrator ou Inkscape — chaque glyphe devient une géométrie vectorielle indépendante des polices installées ; (2) intégrez la police avec @font-face dans le SVG ; (3) assurez-vous que la même police est installée sur le système effectuant la conversion. La conversion en chemin est la référence absolue pour la distribution car le PNG sera identique sur chaque appareil.

Puis-je convertir des centaines de SVG en PNG par lots ?

Pour les conversions une par une, cet outil de navigateur est assez rapide — chaque rendu prend moins d'une seconde. Pour des centaines ou des milliers de SVG (bibliothèques d'icônes, jetons de systèmes de conception), utilisez une approche en ligne de commande : Inkscape expose 'inkscape --export-type=png --export-width=512 icon.svg' qui se scripte dans une boucle for Bash ; 'magick icon.svg icon.png' d'ImageMagick est encore plus simple mais son moteur de rendu SVG est plus faible sur les documents complexes. Pour les pipelines Node.js, la bibliothèque 'sharp' est la norme de production — elle utilise librsvg en dessous et est significativement plus rapide que Chrome headless. Les systèmes de conception modernes utilisent des plugins Storybook ou Style Dictionary pour régénérer les fallbacks raster à chaque build.

Pourquoi mon PNG exporté a-t-il des bords dentelés ou des courbes pixellisées ?

L'aliasing se produit lorsque vous rendez à une résolution trop basse — le chemin mathématique de la courbe est quantifié sur une grille de pixels grossière, produisant des artefacts d'escalier visibles. Solutions : (1) exportez à 2x ou 3x la taille d'affichage cible pour donner au navigateur plus de pixels à anti-crénelage ; (2) assurez-vous que votre SVG a 'shape-rendering="geometricPrecision"' ou repose sur le 'auto' par défaut plutôt que 'crispEdges' qui désactive délibérément l'anti-crénelage ; (3) vérifiez qu'aucun trait n'est défini à 1px sur une limite de pixel non entière, ce qui provoque un rendu demi-pixel et un flou visuel. Pour une sortie parfaite au pixel près, alignez la géométrie SVG sur des coordonnées entières dans votre outil de conception avant l'export.