SVG en PNG : résoudre les problèmes de transparence

Ce guide vous aide à diagnostiquer les problèmes de transparence des PNG obtenus à partir de SVG. Pour les étapes de base, consultez le guide Convertir un SVG en conservant son fond transparent.

Un fond blanc ne signifie pas toujours que la transparence a disparu

Ouvrez le PNG dans un éditeur qui affiche la transparence ou placez-le sur un fond coloré. Une visionneuse peut simplement afficher du blanc derrière les pixels transparents. Si la zone blanche fait bien partie de l’image, vérifiez si le SVG contient un rectangle de fond opaque, une forme remplie ou une image matricielle intégrée.

Le convertisseur SVG en PNG ne supprime pas ces objets. Modifiez le SVG source lorsque c’est possible. Pour détourer une image matricielle, l’outil de création de fond transparent effectue une opération distincte dont vous devez vérifier le résultat.

Aucun réglage de transparence n’est à activer

Ce convertisseur traite un SVG et propose des réglages de largeur et de hauteur en pixels, ainsi que de compression PNG. Les zones déjà transparentes peuvent le rester sans case « Conserver la transparence » ou « Canal alpha ». L’outil ne propose ni suppression de la couleur de fond ni sélecteur de mode PNG-8/PNG-24.

Diagnostiquer les problèmes de contours et les éléments manquants

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

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.

Optimiser un PNG transparent

Commencez par les dimensions réellement nécessaires. La compression PNG sans perte modifie l’effort d’encodage, sans changer les pixels qui sont transparents. Réduire la palette dans un autre éditeur peut alléger le fichier, mais altérer les dégradés et les contours adoucis. Modifier les dimensions supprime ou rééchantillonne des pixels.

Conservez une copie aux dimensions d’origine, modifiez un seul réglage à la fois et comparez les fichiers téléchargés. Examinez les contours sur des fonds clairs et foncés après chaque optimisation. Aucun gain fixe de 20–50 % ou de 40–80 % ne s’applique à tous les visuels. Si la destination accepte le WebP, comparez un export WebP distinct au PNG, sans supposer qu’un format est toujours plus léger que l’autre.

Comparer une seule modification à la fois

Conservez le SVG d’origine, ne modifiez qu’une propriété de la source ou une dimension de sortie, puis comparez le nouveau PNG sur des fonds clairs et foncés. Les champs de dimensions acceptent jusqu’à 8192 px par côté. La compression modifie l’effort d’encodage PNG, sans modifier les valeurs du canal alpha ni la qualité de l’image.

Vérifier les dimensions et les marges séparément du canal alpha

Même transparent, un logo peut mal s’afficher si le sujet occupe une trop petite partie du canevas. Examinez le viewBox du SVG et la position du dessin dans son éditeur d’origine. Ajoutez ou retirez les marges à cet endroit ; les champs de largeur et de hauteur du convertisseur redimensionnent l’image à l’intérieur d’un rectangle de dimensions maximales, sans permettre de modifier les marges du canevas.

Pour une version 2× destinée à l’écran, doublez les dimensions d’affichage prévues et conservez les mêmes proportions. Exportez et examinez chaque taille séparément. Un nom de fichier comme logo@2x.png est une convention de nommage, pas un réglage qui crée des détails supplémentaires.

<img src="logo.png" srcset="logo@2x.png 2x" alt="Company logo">

Les deux fichiers doivent exister sur votre site. Vérifiez la taille réellement affichée et le fond ; ce balisage n’ajoute de transparence à aucune des deux images. Si le logo présente un halo aux deux tailles, reprenez les vérifications des contours dans la source plutôt que de l’agrandir à répétition.

Questions fréquentes

Une compression plus forte corrige-t-elle les contours transparents ?

Non. Vérifiez le dessin source et les dimensions en pixels. La compression ne permet pas de réparer les contours.

Pouvez-vous appliquer une correction à tout un dossier ici ?

Non. La page accepte un seul SVG par tâche. Corrigez les sources dans un éditeur, puis convertissez et examinez chaque fichier séparément.