Quel moteur de vectorisation devriez-vous utiliser ? Un guide des quatre modes de SVGSnap
Tracé, esquisse, traits ou pixel : SVGSnap a quatre moteurs de vectorisation, chacun optimisé pour un type d'image différent. Voici comment choisir le bon.
Un ami m'a envoyé un message la semaine dernière avec une capture d'écran de l'écran de téléchargement et une seule question : "Pourquoi y a-t-il quatre boutons ici ? Lequel suis-je censé choisir ?" Bonne question. Les paramètres par défaut fonctionnent la plupart du temps, mais si vous vous êtes déjà demandé ce que font les trois autres, voici l'article qu'il vous faut.
SVGSnap intègre quatre moteurs de vectorisation. Chacun est conçu pour un type d'image différent, et choisir le mauvais est la principale raison pour laquelle une conversion a l'air pire que prévu.
Pourquoi quatre moteurs au lieu d'un
La première version de ce site était livrée avec un seul traceur, vtracer. Il excelle avec les illustrations couleur, les logos et la plupart des œuvres dérivées de photos. Mais "la plupart" laisse beaucoup de cas de côté.
Un croquis au crayon tracé comme une région de couleur produit deux contours pour chaque ligne, un pour chaque côté du trait de stylo, ce qui double la taille du fichier et ressemble à une vision double quand vous le recoloriez. Un sprite d'art pixel tracé avec des courbes perd tout l'intérêt d'être de l'art pixel. Une signature tracée avec des régions devient une masse informe au lieu d'un trait unique modifiable. Différents problèmes, différentes mathématiques.
Alors le travailleur a grandi. Aujourd'hui il y a quatre moteurs et chacun est construit autour d'un type spécifique d'image.
Illustration : le traceur polyvalent
C'est le paramètre par défaut. Sous le capot, c'est vtracer, un traceur de régions Rust qui lit l'image, groupe les pixels proches par couleur, et dessine des courbes de Bézier autour des bords de chaque groupe. Utilisez-le pour tout ce qui a de la couleur : logos, icônes, illustrations, portraits vectoriels, captures d'écran d'interface utilisateur, photos tracées.
Les trois paramètres que vous pouvez ajuster sont le mode couleur, le niveau de détail et le lissage.
Le mode couleur contrôle la palette. La couleur complète préserve les dégradés (bien pour les illustrations) mais produit des fichiers plus volumineux. Limité ou noir et blanc force des formes plates, ce que vous voulez pour les logos et la sérigraphie.
Le niveau de détail décide de l'agressivité avec laquelle le traceur simplifie. Bas vous donne moins de chemins et des courbes plus nettes au détriment des détails fins. Élevé préserve chaque ride de la source, y compris le bruit. Pour un logo plat, baissez-le. Pour une aquarelle, augmentez-le.
Le lissage correspond au seuil de coin de vtracer. Les valeurs plus élevées arrondissent les coins ; les valeurs plus basses gardent les angles nets. Si votre marque géométrique ressemble à un animal en ballon après la conversion, votre lissage est trop élevé.
Utilisez d'abord le moteur Illustration. Si le résultat a l'air pire que la source pour une raison qui n'est pas 'trop peu de couleurs', le problème est probablement que vous devriez utiliser un moteur complètement différent.
Esquisse : encre noire sur papier blanc
Derrière le bouton Esquisse se trouve potrace, le même traceur qu'Inkscape et une centaine d'autres outils utilisent depuis deux décennies. C'est l'implémentation de référence pour une entrée spécifique : un bitmap noir et blanc. Crayon sur papier. Dessins à l'encre. Flash de tatouage. Une signature scannée. Marionnettes d'ombres. Tout ce qui se résume à des marques sombres sur un fond clair.
Il ne prendra pas la couleur de la source, même s'il y en a, parce que la première chose qu'il fait est de seuiller l'image en 1-bit pur. Les pixels plus sombres que le seuil deviennent le premier plan ; tout le reste devient l'arrière-plan. Le traceur dessine ensuite des contours de Bézier nets autour des régions de premier plan.
Les trois boutons sont seuil, moucheture et lissage.
Le seuil est la ligne entre "ce pixel fait partie du dessin" et "c'est du papier". Montez-le si le scanner a capté trop de grain de papier. Baissez-le si les traits de crayon légers disparaissent.
La moucheture est le --turdsize de potrace (oui, vraiment). Il supprime les régions connectées plus petites que la valeur. Une moucheture de 2 garde le point sur chaque i ; une moucheture de 10 mangera votre ponctuation. Commencez à 2 ou 4.
Le lissage correspond à l'alphamax de potrace, qui contrôle la volonté du traceur d'arrondir les coins. Les lignes de stylo et de crayon sont légèrement bancales même quand vous dessinez soigneusement, et un lissage plus élevé transforme la bancalité en courbes nettes. Pour un logo encré avec des angles nets, baissez-le.
Si vous avez un vrai croquis sur papier et voulez une présentation plus approfondie, j'ai écrit un article séparé sur la vectorisation de croquis au crayon et de dessins scannés qui couvre comment bien scanner en premier lieu.
Traits : vecteurs à ligne unique modifiables
Le troisième bouton dit Traits. En interne c'est le moteur de ligne médiane, et il fait quelque chose de complètement différent des deux premiers.
Tracé et Esquisse contournent tous deux les lignes. Si vous dessinez une ligne noire de 4 pixels de large et lancez l'un d'eux, vous obtenez un vecteur avec deux chemins parallèles, un pour chaque côté du trait, et un remplissage entre les deux. Le résultat a l'air correct mais vous ne pouvez pas "épaissir" la ligne parce qu'il n'y a pas de ligne à épaissir. Il n'y a qu'un rectangle fin rempli.
Le mode Traits squelettise d'abord l'image. La ligne de 4 pixels de large devient une épine dorsale de 1 pixel de large, et le moteur dessine un seul <path> SVG avec un style de trait le long de cette épine. Maintenant le chemin a un vrai attribut stroke-width. Vous pouvez le changer de 2 à 8 dans n'importe quel éditeur vectoriel et la ligne devient plus épaisse. Vous pouvez le recolorer en changeant l'attribut stroke. Vous pouvez l'animer comme un effet de dessin.
C'est le moteur que vous voulez pour l'art dessiné à la main que vous prévoyez de modifier. Flash de tatouage que vous recolorierez dans Illustrator. Une signature que vous voulez animer. Un croquis botanique qui doit être livré en trois épaisseurs de trait différentes sans re-traçage.
Les paramètres sont seuil (même idée qu'Esquisse), largeur de trait et couleur de trait. La sortie passe aussi par une simplification Ramer-Douglas-Peucker, qui est une façon sophistiquée de dire "supprimer les points redondants". Si vos traits semblent hachés, la simplification était trop agressive. S'ils semblent bruyants, elle ne l'était pas assez.
Pixel : vecteur 1:1 pour les sprites et icônes
Le quatrième moteur est le plus opiniâtre. Il existe parce que le traçage de courbes détruit l'art pixel.
Si vous tracez un sprite 32x32 avec vtracer, le traceur fait la moyenne des pixels adjacents de couleur similaire, ajuste des courbes au résultat, et les bords de pixel nets se transforment en masses de Bézier molles. Votre icône d'épée ressemble maintenant à une nouille mouillée.
Le mode Pixel prend l'autre chemin. Chaque série contiguë de pixels de même couleur devient un <rect> aligné sur les axes avec shape-rendering="crispEdges". Deux passes d'encodage par longueur de série (une horizontale, une verticale) fusionnent les séries identiques sur les lignes pour que vous ne vous retrouviez pas avec un rect par pixel. Le résultat est un vrai vecteur. Chaque pixel est une forme modifiable, et il s'adapte sans perdre le caractère pixelisé qui en faisait de l'art pixel en premier lieu.
Il est plafonné à 2048 pixels par côté. L'art pixel est petit par définition, et supprimer le plafond signifie qu'une capture d'écran 4K se transforme en SVG de 200MB.
Le seul paramètre est la taille de palette. Si votre entrée a plus de couleurs uniques que la cible (256 par défaut), le moteur les quantifie vers le bas avec median-cut. C'est ce qui vous permet de donner une peinture numérique et d'obtenir une sortie de style art pixel propre au lieu d'un échec. Baissez-le à 16 ou 32 pour des looks rétro-jeu chunky ; gardez-le à 256 pour des sprites précis.
Le mode Pixel rejette exprès les images trop grandes. Téléchargez une capture d'écran de 4000 pixels de large avec Pixel sélectionné et vous obtiendrez une erreur vous disant d'utiliser Illustration à la place. Le moteur Illustration est ce que vous voulez pour les captures d'écran.
Comment choisir, en 30 secondes
Si vous n'êtes pas sûr de quel moteur utiliser, voici un arbre de décision que vous pouvez faire tourner dans votre tête.
La source a-t-elle de la couleur que vous voulez garder ? Utilisez Illustration. C'est vrai pour presque chaque logo, chaque icône, chaque illustration. Commencez par défaut, puis ajustez le mode couleur et le niveau de détail si le premier passage n'est pas bon.
La source est-elle un dessin noir et blanc sur blanc ? Esquisse. Sortie plus propre qu'Illustration sur la même entrée, à chaque fois.
Est-ce un dessin au trait que vous prévoyez de modifier, recolorer, ou animer les traits ? Traits. La sortie vous donne de vrais chemins avec des attributs de trait que vous pouvez changer dans Illustrator, Figma, ou directement dans le fichier SVG.
Est-ce de l'art pixel, un petit sprite, ou une icône de moins de 256x256 ? Pixel. Tout autre chose avec ce moteur aura l'air faux ou atteindra la limite de taille.
La plupart du temps la réponse est Illustration. Les trois autres existent pour les cas où Illustration est techniquement un traceur mais pas le bon traceur.
Erreurs que j'ai vu faire
Lancer Esquisse sur un logo coloré. L'étape de seuil jette la couleur. Vous obtenez une silhouette noire de votre logo et vous vous demandez où est passée la couleur de marque. Lancez Illustration sur un logo coloré. Esquisse est seulement pour les sources noir et blanc.
Lancer Pixel sur une photographie. Soit le plafond de taille la rejette (bien) soit la quantification de palette se lance et vous donne une version postérisée qui peut ou peut ne pas être ce que vous vouliez. Si vous voulez un vrai vecteur d'une photo, utilisez Illustration avec un détail élevé. Si vous voulez le look postérisé exprès, c'est à ça que sert la quantification Pixel.
Lancer Illustration sur un croquis dessiné à la main. Vous obtiendrez un résultat utilisable. Vous obtiendrez aussi des lignes à double contour, du bruit de grain de papier cuit dans les formes, et un fichier deux fois plus gros que nécessaire. Esquisse gère cette entrée en une passe.
S'attendre à ce que Traits gère les régions remplies. L'étape de squelettisation assume des lignes fines. Donnez-lui un carré noir solide et il squelettise en un seul point au milieu. Utilisez Traits pour l'art au trait, pas pour les remplissages.
Le bon moteur est celui qui correspond à ce que vous avez dessiné, pas celui avec le plus de paramètres.
— SVGSnap Team
Quand vous voulez combiner
Un flux de travail qui vaut la peine d'être mentionné : si votre source est un croquis ou une icône basse résolution, passez-la d'abord par l'agrandisseur d'image à 2x ou 4x, puis convertissez. Chaque moteur fonctionne mieux avec plus de pixels à lire. J'ai vu le même scan passer de "à peine utilisable" à "parfait" avec une étape d'agrandissement entre les deux.
Vous pouvez aussi supprimer l'arrière-plan avant de convertir si votre source a du bruit, un fond coloré, ou une texture de papier. Une entrée plus propre vous donne un vecteur plus propre, quel que soit le moteur que vous choisissez.
Si vous voulez regarder de plus près un cas d'usage spécifique, il y a des procédures pas à pas pour vectoriser des logos pour l'impression et le merchandising et pour vectoriser des dessins scannés qui approfondissent le côté paramètres.
Le convertisseur lui-même est à svgsnap.com. Le sélecteur de moteur est la rangée de quatre boutons sous l'aperçu du fichier. Choisissez-en un, appuyez sur convertir, voyez à quoi ça ressemble. Si la sortie est fausse, changez le moteur, pas les paramètres. C'est généralement la solution la plus rapide.