ImgConvert
Retour au blog
Tutoriel

Convertir SVG en PNG en conservant le fond transparent

Par ImgConvertMis à jour :
5 min de lecture
SVGPNGTransparenceConversion d’images
Convertir SVG en PNG en conservant le fond transparent

Utilisez le convertisseur SVG en PNG lorsqu’un site, un document ou un éditeur a besoin d’une copie matricielle de votre dessin vectoriel. Les zones déjà transparentes dans le rendu du SVG peuvent le rester en PNG. Le convertisseur ne supprime pas un fond opaque.

Pourquoi choisir un PNG transparent ?

Étapes pour convertir un dessin SVG en PNG transparent facile à placer sur différents fonds

Les PNG transparents sont essentiels pour :

  • L’intégration de logos - Placement sur un fond de n’importe quelle couleur
  • Les ensembles d’icônes - Apparence cohérente partout
  • Les superpositions - Calques dans les créations et les compositions
  • Les visuels Web - Placement souple, sans rectangle blanc
  • Les éléments d’applications - Composants d’interface qui s’adaptent aux thèmes

Le SVG et la transparence

Le PNG peut contenir un canal alpha, mais l’extension PNG ne suffit pas à prouver que des pixels sont transparents. Les termes PNG-24 et PNG-32 sont des libellés utilisés par les éditeurs ; ce convertisseur ne propose pas de sélecteur de mode colorimétrique. Une forme servant de fond dans un SVG fait partie du contenu et doit être modifiée dans la source.

Comment le SVG gère la transparence

Le SVG prend en charge la transparence nativement :

  • Aucun fond par défaut : l’arrière-plan est transparent
  • Des couleurs RGBA pour les remplissages semi-transparents
  • Des attributs d’opacité pour les éléments
  • Des modes de fusion pour les effets complexes

Conserver la transparence en PNG

Le PNG prend en charge un canal alpha complet :

  • 256 niveaux de transparence sur 8 bits
  • Des contours lisses grâce à l’anticrénelage
  • Des dégradés semi-transparents

Convertir un SVG en PNG transparent

  1. Sélectionnez un fichier SVG de 20 Mo maximum et attendez la fin de son envoi.
  2. Laissez les dimensions vides pour conserver celles de la source ou saisissez des limites allant jusqu’à 8192 px par côté. Si vous renseignez les deux dimensions, l’image tient dans ce rectangle en conservant ses proportions.
  3. Commencez par le préréglage de compression PNG « Équilibré ». Une compression plus poussée peut réduire le poids, mais n’améliore ni la qualité de l’image ni sa transparence.
  4. Convertissez, téléchargez et vérifiez le PNG sur des fonds clairs et foncés.

Il n’y a ni case « Conserver la transparence », ni réglage du niveau du canal alpha, ni option de suppression de fond, ni sélecteur de mode colorimétrique PNG. Le fichier est traité sur le serveur. Téléchargez-le rapidement et conservez le SVG d’origine.

Préparer le dessin source

Supprimez tout rectangle de fond indésirable dans un éditeur vectoriel avant la conversion. Intégrez autant que possible les images liées et les styles au fichier pour le rendre autonome. Les polices indisponibles pour le moteur de rendu peuvent modifier l’apparence du texte ; convertissez les textes importants en tracés dans l’éditeur d’origine si leur forme exacte compte.

Le PNG est constitué de pixels fixes et ne conserve ni tracés ni calques modifiables. Agrandir une image matricielle intégrée ne restaure pas les détails manquants. Choisissez les dimensions selon l’affichage prévu, puis examinez le résultat obtenu.

Exemples d’utilisation

Conversion de logos

Pour les fichiers de logo :

  1. Supprimez le fond éventuel dans le SVG
  2. Exportez le logo à plusieurs tailles
  3. Vérifiez le résultat sur des fonds clairs et foncés
  4. Prévoyez des versions transparentes et des versions sur fond blanc

Ensembles d’icônes

Pour les icônes d’applications ou de sites Web :

  1. Uniformisez les dimensions, par exemple 512 × 512 pixels
  2. Gardez des marges cohérentes
  3. Convertissez chaque icône séparément et vérifiez que sa transparence est conservée
  4. Testez les icônes aux tailles d’utilisation réelles

Visuels Web

Pour les éléments de votre site :

  1. Exportez à une résolution adaptée
  2. Envisagez des versions Retina (2×)
  3. Vérifiez que le poids du fichier reste raisonnable
  4. Testez la superposition sur différents fonds

Plusieurs fichiers ou plusieurs tailles

Cette page accepte un seul SVG par tâche. Pour obtenir plusieurs exports, convertissez-les et vérifiez-les un par un. Elle ne propose ni envoi de dossier, ni réglage global de transparence, ni commande pour tout exporter. Organisez vous-même les noms de fichiers et les dimensions.

Vérifier la transparence du PNG

Effectuez ces vérifications sur le PNG téléchargé. Un damier dessiné dans l’original fait partie de l’image ; celui d’une visionneuse sert uniquement à visualiser la transparence. Comparez l’image sur au moins deux fonds de couleurs différentes pour les distinguer. L’exemple HTML ci-dessous est à utiliser dans votre propre page de test.

Méthode de vérification rapide

  1. Ouvrez le PNG dans un éditeur d’images
  2. Repérez le fond en damier qui indique la transparence
  3. Ajoutez un calque coloré derrière l’image
  4. Vérifiez que le visuel s’affiche correctement

Vérification dans un navigateur

<div style="background: linear-gradient(45deg, #333, #666)">
  <img src="your-graphic.png" alt="Transparency test">
</div>

Vérifiez qu’aucun rectangle blanc n’apparaît.

Cas particuliers

Vérifiez chaque effet dans le PNG téléchargé, sans supposer que tous les moteurs de rendu SVG produisent des pixels identiques. Une photo intégrée conserve son propre fond opaque tant que cette image source n’est pas modifiée. L’opacité d’un tracé vectoriel ne peut pas supprimer un rectangle blanc placé derrière lui.

SVG contenant des images matricielles intégrées

Si le SVG contient des images matricielles :

  • Les parties matricielles conservent leur transparence d’origine
  • Les parties vectorielles se convertissent normalement
  • Vérifiez que les images intégrées comportent bien de la transparence

Effets de transparence complexes

Pour les SVG contenant :

  • Des effets de flou
  • Des ombres portées
  • Des modes de fusion

Le rendu de ces effets peut varier après conversion. Faites des essais et ajustez-les si nécessaire.

Éléments semi-transparents

Pour les SVG utilisant des valeurs d’opacité :

  • Le poids du fichier peut augmenter
  • Vérifiez la fidélité visuelle après conversion

Questions fréquentes

Une compression plus forte préserve-t-elle davantage de transparence ?

Non. Les préréglages modifient l’effort d’encodage PNG sans perte. Ils ne changent pas les zones transparentes de la source.

Pourquoi le fond est-il blanc ou un contour différent ?

Vérifiez si le blanc fait partie de la source ou s’il correspond uniquement au fond de la visionneuse. Consultez le guide pour résoudre les problèmes de transparence SVG afin de vérifier la source, les polices et les contours.

Pouvez-vous reconvertir le PNG en SVG modifiable ?

Ce convertisseur ne vectorise pas les images. Conservez le SVG d’origine pour les modifications ultérieures.

D’autres outils pour vos prochains travaux sur les images

Découvrez les outils ImgConvert pour la conversion, les fichiers PDF et les GIF.

  • Convertisseurs d’images
  • Outils PDF
  • Outils GIF
Parcourir tous les outils