Convertir du SVG en PNG à des tailles exactes en pixels
Rasterisez icônes et illustrations pour diapositives, CMS hérités et clients mail qui bloquent le SVG — traitement local lorsque les tracés sont confidentiels.
D’autres utilitaires qui complètent bien ce guide :
Pourquoi c'est important
Les clients mail bloquent le SVG inline pour des raisons de sécurité. Les portails enterprise anciens n'acceptent que des vignettes PNG pour logos fournisseurs. Les decks gonflent quand on colle d'énormes SVG — rasteriser à 2× garde des animations fluides tout en garantissant la compatibilité. Convertir en local aide lorsque les kits de marque soumis à NDA contiennent des jeux d'icônes non publiés.
Trois scénarios réels
Exportez des carrés 512 et 1024 px avec fond transparent pour des implémentations de qualité mixte.
Couleurs prévisibles
Associez des primaires WebP/AVIF à des fallbacks PNG dimensionnés depuis le même master SVG.
Amélioration progressive
Rasterisez des graphiques exportés depuis Figma pour des collaborateurs sans outillage vectoriel.
Actifs sûrs pour Office
Parcours
Ouvrez SVG vers PNG.
Téléversez un fichier `.svg` ou collez le markup
Les chaînes SVG inline fonctionnent quand le presse-papiers évite les fichiers temporaires — surveillez les
<image>embarquées énormes.Réglez largeur/hauteur de sortie
Multipliez les pixels CSS par
devicePixelRatiopour des PNG nets sur écrans Retina.Choisissez le fond
Transparent pour les icônes ; remplissage uni quand le lecteur aval suppose un canevas blanc.
Prévisualisez la sortie raster
Inspectez l'anticrénelage le long des diagonales — augmentez la résolution si un moiré apparaît sur traits fins.
Téléchargez le PNG
Versionnez les noms (
logo@2x.png) pour que le pipeline invalide le cache volontairement.
Conseils avancés
- Préférez le SVG sur le web moderne lorsque la CSP le permet — le PNG reste le parachute de compatibilité.
- Attention aux filtres : les filtres SVG exotiques peuvent rasteriser différemment selon les moteurs — vérifiez dans les navigateurs cibles.
- Pipeline ICO : combinez les sorties avec SVG vers ICO pour empaqueter les favicons.
Pièges courants
Piège courant
Polices embarquées manquantes
Convertissez le texte en contours dans l'outil de design si les polices distantes échouent à la rasterisation.
Piège courant
Performances SVG énormes
Les chemins complexes peuvent figer l'onglet — simplifiez la géométrie ou séparez les calques avant de convertir de grandes illustrations.
Piège courant
Changements d'espace couleur
Les exports CMYK relèvent des flux print — la rasterisation navigateur cible l'affichage RVB par défaut.
Quand ce n'est pas l'outil adapté
- Exports CI sans interface : scriptez
resvg/sharppour des builds déterministes dans des conteneurs Linux. - Sprites multi-densité : les packers de textures gèrent mieux padding et bin packing.
- SVG animé (SMIL/CSS) : capturez des séquences d'images avec des outils vidéo dédiés.
FAQ
La conversion envoie-t-elle des fichiers ?
Traitement local — important lorsque le SVG contient des données de tracé propriétaires.
Exporter `@1x` et `@2x` rapidement ?
Dupliquez les passes en doublant les dimensions — notez les noms tout de suite pour éviter collisions de cache.
Pourquoi le PNG est-il plus lourd que le SVG ?
Les dégradés photo explosent en raster — gardez le vectoriel pour l'art géométrique quand c'est possible.
Étapes suivantes
- Compressez les PNG avec le compresseur d'images.
- Recadrez les marges blanches avec le recadrage d'image.
- Exportez par lots vers PDF après ajustements de mise en page avec image vers PDF.