Par Claire Yoon9 min de lecture

Comment conserver un fond transparent lors de la conversion en SVG

Un SVG n'a pas de fond par défaut : si un rectangle blanc apparaît, c'est que quelque chose l'a ajouté. Voici comment garder la transparence quand vous convertissez un PNG en SVG, et quoi vérifier.

Sur cette page

Voici le détail qui rend tout cela si déroutant : par défaut, un SVG n'a aucun fond. Il est transparent, sauf si quelque chose place une forme opaque derrière votre visuel. Donc, quand votre SVG converti arrive avec un rectangle blanc autour, la bonne question est : qu'est-ce qui a ajouté ce blanc ? En général, c'est l'une de ces trois causes : une forme de fond présente dans votre design, un réglage d'export qui remplit le canevas, ou un convertisseur qui a tracé la zone vide comme un bloc blanc au lieu de la laisser tranquille. La correction dépend de votre cas, et aussi du fait que votre fichier d'origine avait réellement de la transparence ou non. Voyons cela clairement.

La version rapide
  • Un SVG est transparent par défaut. Un fond blanc signifie que quelque chose l'a ajouté.
  • Vous convertissez un PNG transparent ? Utilisez un convertisseur qui respecte le canal alpha, afin qu'il trace votre sujet et laisse le reste vide. Convertissez un PNG en SVG, puis vérifiez le résultat.
  • Vous partez d'un JPG ? Il ne peut pas être transparent, donc il n'y a rien à conserver. Supprimez d'abord le fond, puis convertissez.
  • Vous exportez depuis Illustrator ou Inkscape ? Supprimez le rectangle de fond blanc sur votre canevas et vérifiez vos réglages d'export.
  • Vérifiez toujours : placez le SVG sur un fond coloré. Si vous voyez encore du blanc, quelque chose est bien là.

D'abord, qu'est-ce qui ajoute vraiment le blanc ?

Avant de corriger quoi que ce soit, identifiez d'où vient le blanc. Il y a trois situations possibles, et la solution n'est pas la même.

Votre situationPourquoi c'est blancLa solution
Vous convertissez un PNG transparent en SVGLe convertisseur a rempli la zone vide, ou l'a tracée comme une formeUtilisez un convertisseur qui respecte la transparence ; supprimez toute forme de fond parasite qu'il aurait ajoutée
Vous convertissez un JPG, ou un PNG avec un fond blanc opaqueIl n'y a jamais eu de transparence à conserverSupprimez d'abord le fond, puis convertissez
Vous exportez un SVG conçu dans Illustrator ou InkscapeUn rectangle de fond est présent sur votre canevas, ou un réglage d'export ajoute un remplissageSupprimez la forme de fond ; vérifiez l'option de transparence à l'export
D'où vient le blanc
Schéma montrant trois sources de fond blanc dans un SVG : une forme de rectangle en arrière-plan, un réglage d'export qui ajoute un remplissage, et un convertisseur qui trace la zone vide comme un bloc blanc
Un SVG commence transparent. Le blanc s'invite via une forme de fond, un réglage d'export ou un tracé peu soigneux.

La ligne du milieu piège le plus de monde, alors commençons par là.

Si votre fichier n'est pas vraiment transparent, aucun convertisseur ne peut le réparer

C'est la partie que les forums passent souvent sous silence. Un JPG ne peut jamais stocker de transparence. Si votre logo est un JPG, son fond est inscrit dans les pixels, même quand ce fond est blanc et donne l'impression d'être « vide ». Le convertir en SVG ne fera pas disparaître ce fond. Le tracé l'inclura comme une forme, ou se posera directement par-dessus. (Convertir un JPG est d'ailleurs un cas un peu différent, traité dans comment convertir un JPG en SVG.)

Certains PNG ont le même problème. Un PNG peut stocker de la transparence, avec un canal alpha, mais beaucoup ont simplement été enregistrés avec un remplissage blanc. Si vous ne savez pas lequel vous avez, ouvrez le fichier sur un fond sombre. Vous voyez un rectangle blanc autour de votre logo ? Il n'est pas transparent. Il en avait seulement l'air sur une page blanche.

Dans les deux cas, la solution est la même : supprimez le fond avant de convertir, afin que le convertisseur dispose d'une vraie transparence. Détourez le sujet dans n'importe quel éditeur photo, exportez un PNG transparent, puis tracez celui-ci. (PNG ou SVG explique pourquoi un PNG peut contenir de la transparence et pas un JPG.)

Convertir un vrai PNG transparent en SVG

Si votre source est un PNG réellement transparent, conserver cette transparence pendant la conversion dépend surtout du convertisseur utilisé. En principe, le travail est simple : tracer le sujet visible en chemins vectoriels et laisser la zone transparente sous forme d'espace vide, pas de forme blanche. Un bon convertisseur fait exactement cela. Un convertisseur négligent fait plutôt l'une de ces deux choses agaçantes :

  • Il remplit la zone transparente en blanc, et vous obtenez un rectangle opaque.
  • Il trace le bord de la zone transparente comme son propre chemin, et vous vous retrouvez avec un rectangle invisible mais bien réel autour de votre design, qui apparaît dès que vous le placez sur un fond coloré ou que vous l'envoyez vers une machine de découpe. Les utilisateurs de machines de découpe rencontrent sans cesse ce problème. C'est le même rectangle parasite autour d'un design Cricut.

Le bon réflexe est donc de convertir avec un outil qui gère proprement le canal alpha, puis de vérifier le résultat (on y revient juste après). Un logo transparent est le cas le plus courant.

À quoi cela ressemble avec PerfectVector

PerfectVector lit la transparence de votre PNG et trace uniquement ce qui existe vraiment. La partie visible de votre logo devient des chemins vectoriels propres et modifiables, tandis que la zone transparente reste transparente : pas de rectangle blanc, pas de cadre masqué. Le résultat fonctionne sur n'importe quel fond coloré, sur un site web, sur une planche de stickers ou sur un tapis Cricut ; la couleur derrière apparaît tout simplement à travers. Vous pouvez convertir votre PNG transparent et le vérifier sur un fond coloré en quelques secondes. Les premières conversions sont gratuites, sans carte bancaire.

Pour être honnête avec vous, cependant : PerfectVector conserve la transparence qui est déjà dans votre fichier. Il ne peut pas inventer une transparence qui n'a jamais existé. Si votre source est un JPG ou un PNG rempli de blanc, détourez d'abord le fond comme expliqué plus haut, puis la conversion restera propre.

Rectangle blanc
Un logo converti en SVG avec un rectangle blanc indésirable derrière lui, affiché sur un fond bleu-vert
Un tracé négligent a laissé un rectangle blanc, évident dès qu'il est posé sur une couleur.
Transparent
Le même logo converti en SVG avec le fond conservé transparent, laissant apparaître proprement le bleu-vert
Transparence conservée : le fond coloré apparaît directement à travers.

Comment vérifier que cela a vraiment fonctionné

Ne faites pas confiance à la miniature. Sur une page blanche, un SVG transparent ressemble exactement à un SVG avec fond blanc, ce qui explique pourquoi beaucoup pensent que tout va bien jusqu'au moment où ce n'est plus le cas. Deux vérifications rapides :

  • Placez-le sur une couleur. Mettez le SVG au-dessus d'un fond coloré dans votre navigateur, Figma, Canva ou Design Space. Une vraie transparence laisse passer la couleur. Un rectangle blanc, non.
  • Cherchez un rectangle parasite. Ouvrez le SVG et sélectionnez les formes. S'il y a un rectangle pleine taille derrière votre visuel, supprimez-le. C'est le coupable dans la plupart des cas où « c'est encore blanc ».

Exporter un SVG que vous avez conçu (l'autre cas)

Si vous ne convertissez pas un raster mais exportez un SVG que vous avez dessiné vous-même, le blanc vient généralement de votre propre canevas, pas d'un convertisseur :

  • Illustrator : supprimez tout rectangle blanc servant de fond. La couleur du plan de travail ne s'exporte de toute façon pas ; une fois la forme de fond retirée, enregistrez ou exportez en SVG et il sera transparent.
  • Inkscape : assurez-vous qu'aucun rectangle de fond n'est sélectionné, masquez ou supprimez le raster d'origine si vous en avez tracé un, puis exportez le vecteur. Les SVG d'Inkscape sont transparents sauf si vous avez ajouté un remplissage.

Dans tous les cas, la règle de départ reste valable : un SVG n'a pas de fond, sauf si vous lui en avez donné un.

FAQ

Un SVG prend-il en charge un fond transparent ? Oui, et il est transparent par défaut. Un SVG n'a pas de fond sauf si une forme ou un remplissage est ajouté ; la transparence est donc l'état de départ, pas une option à activer. Le blanc apparaît seulement quand quelque chose le place là.

Comment enregistrer un SVG avec un fond transparent ? Assurez-vous qu'il n'y a aucun rectangle de fond dans votre design, puis exportez sans remplissage d'arrière-plan (la plupart des outils exportent en transparent par défaut). Ensuite, vérifiez en plaçant le SVG sur un fond coloré. Si vous voyez du blanc, trouvez et supprimez la forme de fond.

Pourquoi mon SVG a-t-il un fond blanc après conversion ? Soit le convertisseur a ajouté un remplissage blanc ou tracé la zone vide comme une forme, soit votre fichier d'origine n'était pas réellement transparent. Vérifiez d'abord la source : s'il s'agit d'un JPG ou d'un PNG rempli de blanc, il n'y avait pas de transparence à conserver, et vous devrez supprimer le fond avant de convertir.

Puis-je convertir un JPG en SVG avec un fond transparent ? Pas directement, car un JPG ne peut pas stocker de transparence. Son fond est intégré aux pixels. Supprimez d'abord le fond (détourez le sujet et exportez un PNG transparent), puis convertissez ce fichier en SVG.

Comment conserver la transparence quand je convertis un PNG en SVG ? Partez d'un PNG réellement transparent et utilisez un convertisseur qui respecte le canal alpha, afin qu'il trace votre sujet et laisse le reste vide. Confirmez ensuite le résultat sur un fond coloré et supprimez tout rectangle parasite que le tracé aurait pu ajouter.

Comment supprimer un fond blanc d'un SVG ? Ouvrez le SVG, sélectionnez les formes et supprimez le rectangle blanc pleine taille derrière votre visuel. Si le blanc fait partie d'une image raster intégrée plutôt que d'une forme, reconvertissez plutôt depuis une source vraiment transparente.


Votre logo transparent est encore coincé en PNG ? Transformez-le en SVG propre qui conserve sa transparence, puis placez-le sur un fond coloré pour confirmer qu'elle est bien passée.

Plus depuis le blog

Prêt à créer
des vecteurs parfaits ?