Convertir un PNG en SVG avec des dégradés : pourquoi vous obtenez des rayures et comment garder le dégradé
Un dégradé dans un PNG, ce sont des milliers de couleurs. La plupart des convertisseurs les regroupent en bandes. Comment retrouver un vrai dégradé SVG, lesquels peuvent l'être, et que faire pour l'impression et la découpe.
Envoyez un logo avec un remplissage doux du bleu au violet dans un outil PNG vers SVG classique, et le résultat est un empilement de rayures unies avec des bords durs entre elles. Augmentez le nombre de couleurs et les rayures deviennent plus fines et plus nombreuses. Elles ne deviennent jamais un dégradé, parce que l'outil n'a aucune idée que c'est un dégradé qu'il regarde.
D'où viennent les rayures
Un dégradé dans une image matricielle est une suite continue de milliers de couleurs légèrement différentes. Un convertisseur qui postérise puis vectorise réduit d'abord l'image à N couleurs, ce qui découpe la suite en N bandes, puis calque chaque bande comme une forme à part. Le SVG est techniquement redimensionnable, mais le dessin a été remplacé par une carte en courbes de niveau. Chaque bande supplémentaire est aussi un tracé de plus, une frontière de plus où peut apparaître un filet, et une chose de plus à nettoyer dans l'éditeur.
Ce qu'est un vrai dégradé SVG
SVG possède les éléments linearGradient et radialGradient : une direction ou un centre, quelques points de couleur, et le moteur de rendu remplit la forme en douceur à n'importe quelle taille. Une forme, un remplissage, quelques octets. C'est ainsi que le graphiste l'aurait dessiné, et c'est ce que vous voulez dans le fichier : modifiable dans Figma ou Illustrator, et lisse sur un écran 4K comme sur une affiche.
Comment svgize le retrouve
Le moteur traite le dégradé comme une hypothèse. Pour chaque zone, il teste si c'est une couleur unie, un dégradé linéaire, radial ou elliptique qui explique le mieux les pixels, en tenant compte du bruit et de la compression mesurés sur la source. Quand un dégradé l'emporte, il est écrit comme un élément de dégradé avec ses points de couleur. Quand une couleur unie l'emporte, vous obtenez une couleur unie. Rien n'est découpé en bandes par principe ; ce sont les pixels qui décident.
- Dégradés linéaires dans n'importe quelle direction, y compris en biais.
- Dégradés radiaux et elliptiques, pour les halos lumineux, les boutons et les reflets sphériques.
- Dégradés à l'intérieur d'une forme qui a aussi un contour net : le bord est partagé avec le voisin, le remplissage est un dégradé.
Ce qui ne peut pas être retrouvé
Un dégradé avec plusieurs inversions de couleur, un dégradé de maille ou un ombrage photographique doux n'a aucun élément SVG unique pour le décrire. Pour ceux-là, le moteur se rabat sur des couches tonales lisses en mode Illustration : le rendu est juste, il s'agrandit, mais c'est un empilement de formes, pas un seul remplissage. Si le dégradé compte pour des modifications ultérieures, demandez au graphiste ou au générateur une version plus simple à deux couleurs.
Impression, découpe et broderie
L'impression numérique et les écrans gèrent directement les dégradés SVG. La découpe de vinyle, la gravure laser et la broderie, non : un dégradé ne se découpe pas et ne se brode pas. Pour ces usages, convertissez une version du dessin en aplats, ou fixez une limite de couleurs dans svgize pour que le dégradé soit volontairement réduit à quelques paliers unis que la machine sait traiter. La sérigraphie se situe entre les deux ; quelques paliers unis s'impriment en général mieux qu'un vrai dégradé sur textile.
Convertir un logo avec dégradés
Vérifier le résultat
Ouvrez le SVG dans un éditeur de texte et cherchez « Gradient ». Si le remplissage est un seul élément avec deux ou trois points de couleur, le dégradé a survécu. Si vous voyez à la place des dizaines de tracés aux couleurs hexadécimales légèrement différentes, ce sont des rayures. Le nombre de tracés et de couleurs affiché à côté de chaque résultat svgize vous dit la même chose avant le téléchargement.