Instructions pratiques

Icône SVG dans Recraft : de la génération au contrôle à 24 pixels

Sur une grande zone de travail, l’arrosoir paraît bien dessiné, mais dans le menu, son anse disparaît. Voyons comment créer une icône vectorielle dans Recraft et l’adapter à la taille à laquelle elle sera réellement utilisée.

Silhouette verte d’un arrosoir en aplats, avec des points d’ancrage sur le contour vectoriel, sur une feuille claire.
Illustration éditoriale du principe d’un contour vectoriel ; ce n’est ni l’interface ni un résultat de Recraft.

Partir de la taille et de l’usage

Imaginons qu’une rubrique consacrée aux plantes ait besoin d’un petit arrosoir vert. Il occupera 24 × 24 pixels dans le menu et 48 × 48 dans une fiche d’aide. C’est un exercice pédagogique, pas la présentation d’un test de Recraft. Le critère est simple : l’objet doit être reconnaissable sans légende.

Avant de générer l’image, décidez quels détails sont indispensables. Pour notre arrosoir, ce sont le corps, un bec allongé à droite et une anse à gauche avec une ouverture bien visible. Les reflets, les motifs sur la paroi et les gouttes d’eau isolées n’apportent rien à cet usage. Si le bec disparaît à la réduction, il ne reste qu’un seau vert.

Choisir la génération vectorielle

Ouvrez un projet dans Recraft Studio et allez dans Create. Dans le paramètre Generation type, choisissez Vector : la documentation actuelle le présente comme un type de génération distinct de Image. Sélectionnez un modèle vectoriel adapté parmi ceux disponibles dans votre compte, puis un format carré s’il convient à votre maquette.

Une image avec des aplats n’est pas forcément vectorielle. Le mode Image peut produire une illustration d’apparence proche, mais dans un autre format de départ. La documentation de Recraft précise aussi que les images de référence ne sont pas disponibles pour la génération de type Vector. Pour cet exercice, partez donc d’un texte ; réservez l’opération distincte Vectorize au traitement d’une image matricielle existante.

Décrire une forme que l’on pourra vérifier

Pour un premier essai, vous pouvez utiliser ce prompt : « Icône simple en aplats d’un arrosoir de jardin, vue de côté. Corps vert et large, bec court bien visible dirigé vers la droite, grande anse à gauche avec une ouverture dégagée. Un seul aplat vert foncé, sans dégradés, ombres, texte, motifs ni gouttes d’eau. Objet entier dans une composition carrée, avec de l’espace libre autour. L’icône doit rester lisible en petit format. »

La dernière phrase exprime une intention ; elle ne vérifie pas le résultat à votre place. Générez plusieurs variantes et retenez d’abord la silhouette la plus facile à comprendre. Un arrosoir très décoré peut être plus séduisant sur la zone de travail et moins efficace comme repère de navigation.

Enlever le superflu et corriger le défaut le plus visible

Regardez le raccord entre le bec et le corps, puis vérifiez que l’anse ne se confond pas avec la paroi. Une tache verte isolée sur le bord peut être une forme de trop ; à l’inverse, une fine ouverture claire peut être le seul indice permettant de reconnaître l’anse. Ce sont ces zones qu’il faut corriger en premier.

Recraft dispose d’un Vector Editor. D’après la documentation, un double-clic sur l’image vectorielle ouvre ses différentes formes à l’édition ; un autre double-clic sur la forme voulue permet de modifier les points et les courbes. La position des éléments et leur couleur de remplissage peuvent aussi être ajustées. Ici, mieux vaut élargir une ouverture trop étroite et supprimer un détail accidentel que compliquer à nouveau tout le dessin.

Conservez la version antérieure à la retouche. Si la simplification fait perdre la forme reconnaissable de l’objet, vous pourrez y revenir facilement.

Comparer les versions de 24 et 48 pixels à la grande image

Placez des copies de l’icône dans la maquette aux deux tailles prévues et regardez-la à l’échelle normale de 100%. Agrandir le petit symbole jusqu’à lui faire occuper la moitié de l’écran n’aide pas à cette vérification : personne ne le verra ainsi.

À 24 pixels, vérifiez trois points : distingue-t-on le bec, l’ouverture de l’anse reste-t-elle visible et y a-t-il assez d’espace autour du corps ? Passez ensuite à 48 pixels. Si la grande version se lit bien mais que la petite perd sa forme, changer simplement de format ne résoudra rien. Simplifiez le contour, agrandissez une ouverture essentielle ou préparez une variante réservée au menu.

Vérifiez l’icône sur le fond où elle apparaîtra. Du vert foncé sur blanc et le même vert sur une surface sombre n’offrent pas la même lisibilité. Les contours nets du SVG ne compensent ni un contraste trop faible ni une composition trop serrée.

Deux pictogrammes d’arrosoir en aplats : l’un surchargé de détails, l’autre simplifié avec une anse bien ouverte.
Schéma de simplification d’un pictogramme pour les petites tailles. Exemple éditorial, sans résultat de test de Recraft.

Exporter en SVG et ouvrir le fichier téléchargé

Une fois la forme satisfaisante, choisissez l’export en SVG. Vérifiez le fichier téléchargé dans l’éditeur qui servira à réaliser la maquette : l’objet est-il entièrement visible, les marges ne sont-elles pas démesurées, les couleurs et les ouvertures ont-elles été conservées ? Recommencez le contrôle à 24 et 48 pixels après avoir placé l’icône dans le véritable composant d’interface.

La documentation de Recraft impose une condition importante pour exporter un cadre entier : tous ses éléments doivent être vectoriels. S’il contient encore une image matricielle, il faudra d’abord la vectoriser. N’ajoutez donc pas une décoration en PNG à l’icône préparée si le résultat final doit être exporté en SVG.

Si un arrosoir adapté existe déjà en PNG

Suivez alors un autre parcours : placez l’image matricielle sur la zone de travail, sélectionnez-la, puis choisissez Vectorize dans le panneau contextuel. La documentation explique comment limiter le nombre de couleurs avec Color Reduction, puis modifier la palette. Il s’agit de convertir une image existante, et non de générer directement un vecteur à partir d’un texte.

Choisissez une image de départ nette, avec des aplats. Recraft signale un risque d’artefacts lors de la vectorisation de photos, de rendus 3D ou d’illustrations très texturées. Après la conversion, vérifiez de nouveau le bec, l’anse et la lisibilité en petit format. Remplacer simplement l’extension PNG par SVG ne réalise pas cette opération.

Conserver les fichiers de travail et vérifier les conditions du forfait

Gardez ensemble le projet, le SVG final, le prompt et les tailles prévues. Si vous avez créé une version simplifiée pour le menu, identifiez-la séparément. À la prochaine retouche, vous éviterez ainsi de remplacer la petite icône lisible par la version plus complexe conçue sur une grande zone de travail.

Avant une utilisation dans un projet commercial, consultez les tarifs actuels de Recraft. Le service indique aujourd’hui que les résultats du forfait gratuit sont publics et ne sont pas sous licence pour un usage commercial ; il prévoit d’autres conditions pour les images créées pendant un abonnement payant. Le simple fait de pouvoir télécharger un SVG ne prouve pas que vous disposez des droits adaptés. Vérifiez les modèles disponibles, la consommation de crédits et les conditions du compte avant de lancer le travail.

Sources et documentation

Tous les articles