Convertir le pixel art en vecteur sans perdre les bords nets

Tu peux convertir le pixel art en vecteur, mais décide d’abord si les pixels carrés doivent rester visibles. Pour préserver l’original, reconstruis l’image comme grille ou mosaïque d’objets. Pour transformer le sprite en illustration lisse, utilise la vectorisation des contours. Ce sont des sorties différentes et une vectorisation générique ne choisit pas à ta place.

Si tu modifies un sprite de jeu dans Scratch, Convert to Vector change le mode d’édition sans vectoriser le bitmap. Utilise les vérifications de modification des costumes Scratch pour choisir entre garder les pixels, redessiner une partie ou importer des formes SVG vectorisées, puis compare le centre du costume de remplacement à l’original.

Si le but est simplement d’afficher un pixel art net sur un site ou dans un jeu, un SVG peut être inutile. Un PNG correctement dimensionné avec un agrandissement de type plus proche voisin est souvent plus petit et fidèle ; sur le web, image-rendering propose crisp-edges et pixelated pour préserver les bords nets.

Trois sorties pour trois usages différents

Il s’agit moins du « meilleur » format que du sens des blocs. En pixel art, les bords en escalier sont souvent intentionnels. Les lisser peut être aussi destructeur qu’ajouter du flou à un dessin au trait.

Préserver la grille et lisser les contours sont des tâches différentes

Méthode 1 : préserver exactement la grille

La conversion la plus littérale transforme les cellules en rectangles vectoriels. Un pixel rouge devient un carré rouge. Des pixels rouges adjacents peuvent rester séparés ou fusionner en une forme rectangulaire plus grande sans changer la silhouette.

Avant de commencer, retrouve les vraies dimensions de la grille. Un sprite affiché en 800 par 800 pixels peut venir d’une grille 32 par 32 agrandie au plus proche voisin. C’est cette structure 32 par 32 qu’il faut reproduire, pas les dimensions d’affichage agrandies.

Procédure Object Mosaic d’Illustrator

Adobe documente une méthode intégrée pour convertir un bitmap incorporé en mosaïque :

1. Place le pixel art original dans Illustrator et incorpore-le.
2. Sélectionne l’image et choisis Object > Create Object Mosaic.
3. Fais correspondre le nombre de tuiles à la grille originale si tu la connais.
4. Utilise des tuiles carrées et une sortie en couleur.
5. Garde le matriciel jusqu’à examen de la mosaïque, puis retire-le ou masque-le.
6. Compare silhouette extérieure, espaces intérieurs et palette à fort zoom.

La documentation Create Object Mosaic décrit la commande, les tuiles carrées, les couleurs et le traitement de la source. La procédure pixel art est un usage pratique de ce comportement documenté.

Une mosaïque peut être fidèle mais inefficace. Un sprite 64 par 64 a 4 096 cellules avant fusion. Supprime les cellules totalement transparentes, combine les rectangles adjacents de même couleur si possible et évite les objets invisibles dans le SVG final.

Méthode 2 : créer un SVG en grille sans Illustrator

Tu peux construire le même fichier avec un script prenant en compte les pixels ou un convertisseur dédié. Le principe compte plus que l’application :

1. Lis la source à sa taille native de grille.
2. Transforme chaque pixel non transparent en rectangle vectoriel exact.
3. Préserve les valeurs de palette sans anticrénelage.
4. Fusionne les cellules voisines uniquement si la forme résultante garde la même grille visible.
5. Exporte avec un viewBox correspondant aux dimensions natives.
6. Teste le SVG à des tailles d’affichage entières et non entières.

Le projet libre vectorize-pixelart est un exemple d’utilitaire spécialisé. Il montre aussi une limite générale : les grilles grandes ou complexes peuvent produire des SVG lourds. Considère un ancien utilitaire comme matière de recherche ; examine son code et sa maintenance avant de l’ajouter en production.

Si tu connais le balisage SVG, tu peux aussi reconstruire manuellement un petit sprite avec <rect>. C’est raisonnable pour une icône 12 par 12, pas pour une scène détaillée.

Méthode 3 : lisser volontairement les formes

Parfois, les pixels sont une ébauche plutôt que l’identité. Tu peux vouloir transformer personnage, fleur ou icône en autocollant, impression ou logo aux contours arrondis.

PerfectVector convient si tu veux cette interprétation lissée. Envoie la plus grande version agrandie au plus proche voisin dont tu disposes, puis évalue le résultat comme nouvelle illustration :

1. Retire d’abord l’anticrénelage. Les pixels de bord aux transitions douces créent des couleurs et petites formes supplémentaires.
2. Contrôle la palette. Si la source utilise huit couleurs, la vectorisation ne doit pas en inventer des dizaines à cause de compression ou flou.
3. Examine les diagonales en escalier. Décide lesquelles doivent devenir des segments droits ou des courbes.
4. Vérifie les trous et espaces d’un pixel. Les petites ouvertures peuvent se fermer lors de la simplification des zones voisines.
5. Examine les nœuds. Le but du lissage n’est pas de remplacer chaque angle carré par plusieurs petites courbes.
6. Teste à la taille de destination. Une courbe agréable sur une affiche peut effacer un visage ou une main à la taille d’icône.

Cette méthode change le dessin. Garde le PNG source avec le SVG pour éviter de confondre l’interprétation et une archive exacte.

Problèmes de préparation aggravant chaque méthode

La source a été redimensionnée avec lissage. Reviens au sprite natif ou redimensionne au plus proche voisin. Une fois les couleurs de bord mélangées figées, retrouver la grille devient plus difficile.

Le fichier est un JPG. La compression crée des blocs colorés et oscillations autour de chaque bord net. Utilise le PNG original si possible.

Le fond transparent est devenu blanc opaque. Un fond blanc peut devenir des milliers de cellules indésirables ou une grande forme vectorisée. Restaure la transparence avant conversion et vérifie sur un canevas contrasté. Le guide des fonds SVG transparents couvre cet examen.

Le dessin contient des effets semi-transparents. Lueurs, ombres et opacités partielles ne sont pas des cellules traditionnelles. Décide de les garder comme effets matriciels, les quantifier en couleurs pleines ou les redessiner pour la version vectorielle.

As-tu besoin de vecteurs pour un site ?

Pas forcément. Pour un sprite ou une icône, le PNG peut rester le bon fichier maître. Utilise la taille native, agrandis par multiples entiers si possible et configure le navigateur ou moteur pour une interpolation pixellisée ou au plus proche voisin.

La grille SVG aide si la palette doit se modifier comme objets, si l’impression doit être grande ou si la destination exige des vecteurs. Elle ne rend pas automatiquement une petite ressource écran plus légère. Un objet par cellule peut peser davantage qu’un PNG compact.

C’est un cas où « SVG se redimensionne indéfiniment » est vrai mais incomplet. Le dessin peut devenir coûteux à stocker, modifier ou rendre. Le guide PNG ou SVG explique le choix général et la signification de la vectorisation d’image pourquoi les méthodes classiques favorisent les formes plutôt que les grilles.

Vérifications finales

Avant livraison, compare à l’original à la taille native et à la taille prévue.

• Les dimensions de grille correspondent à la source.
• Aucune couleur de frange anticrénelée n’est introduite.
• Les cellules transparentes restent transparentes.
• Les silhouettes en escalier restent intactes dans la méthode de préservation.
• Les bords lissés sont volontaires dans la méthode de contours.
• Espaces d’un pixel, yeux, reflets et trous intérieurs restent lisibles.
• Les cellules répétées de même couleur sont simplifiées uniquement si l’image reste identique.
• Le SVG n’intègre pas accidentellement le matriciel original ; sinon il peut encore sembler pixellisé malgré son extension.

La méthode la plus propre explicite son compromis. Préserve la grille lorsque les pixels sont le dessin. Lisse les contours pour une nouvelle interprétation vectorielle. Garde le PNG lorsque le vecteur n’ajoute aucun contrôle utile.

Sources

1. Adobe Illustrator — Créer des croquis et mosaïques — Object Mosaic, tuiles carrées, sortie couleur et nécessité d’un matriciel incorporé.
2. MDN — CSS image-rendering — Rendu de type plus proche voisin pour le pixel art web.
3. W3C — Spécification PNG, troisième édition — Modèle matriciel sans perte et canal alpha.
4. W3C — Formes SVG de base — Rectangles utilisés dans les SVG de cellules de grille.
5. W3C — Coordonnées SVG et viewBox — Correspondance d’une grille native avec une zone d’affichage SVG.

Si tu veux des contours lisses plutôt qu’une grille préservée, passe le dessin dans PerfectVector, puis compare silhouette, espaces d’un pixel et petits détails au fichier maître avant utilisation.