De l’idée au SVG prêt à utiliser

Un SVG est terminé lorsqu’il fonctionne à l’endroit où vous comptez l’utiliser. Un grand aperçu convaincant peut devenir une icône illisible dans une barre d’outils, arriver avec un fond indésirable ou contenir une image matricielle plutôt que des formes modifiables. Ce parcours vous aide à préciser votre brief, à choisir la bonne méthode de création et à vérifier chaque livraison de manière reproductible.

Commencez par la destination

Notez le sujet, l’usage, les dimensions et le fond avant d’ouvrir un outil. « Une icône de cactus » laisse beaucoup de décisions en suspens. « Une icône de cactus pour une application de jardinage, lisible à 24 et 48 pixels, en vert et crème, sur fond transparent » vous donne des critères concrets.

Distinguez les exigences des préférences. Le contour doit rester visible à 24 pixels ; la forme du pot peut peut-être varier. Pour une bannière, la composition et l’espace autour du sujet peuvent compter davantage que les petits détails. Gardez ce brief à côté de l’aperçu afin que chaque révision réponde à un problème précis.

Choisissez une méthode de création

• Décrire une idée : utilisez la génération SVG par IA pour créer une nouvelle icône ou illustration à partir de mots. La génération de texte vers SVG coûte 1 crédit et nécessite une connexion avec un solde suffisant.
• Convertir une image existante : utilisez image vers SVG pour un PNG ou JPG qui contient déjà des formes intéressantes. Le processus de vectorisation d’image coûte 2 crédits et nécessite également une connexion. Il interprète l’image sans promettre une reconstruction exacte de chaque pixel.
• Dessiner vous-même les formes : utilisez le dessin SVG à main levée pour un croquis volontaire ou une géométrie simple. Le dessin, la compression SVG et l’export matriciel fonctionnent localement dans le navigateur. Traiter un fichier ne nécessite pas de générer une image avec l’IA.

Passez par Studio pour la génération. Choisissez la méthode adaptée à votre matière de départ, plutôt que de demander sans cesse à l’IA de reproduire une forme que vous pourriez tracer directement.

Rendez la première consigne précise

Commencez par un seul sujet et une seule fonction visuelle. Indiquez la palette, la silhouette, le style des traits et le fond, puis retirez les demandes qui détournent l’attention. Par exemple :

Un cactus unique dans un pot, vu de face, pour l’icône d’une application de jardinage. Trois couleurs en aplats : vert foncé, menthe et crème chaud. Formes simples et affirmées, contours réguliers, espace négatif généreux, composition centrée, fond transparent sobre. Aucun texte, lettre, filigrane, dégradé ou minuscule détail décoratif. Lisible à 24 × 24 pixels.

Les noms de couleurs donnent une direction, mais ne garantissent pas des valeurs de marque exactes. Si vous avez besoin de couleurs ou d’une typographie précises, vérifiez et ajustez le SVG téléchargé dans un éditeur vectoriel adapté.

Conservez le sujet, la palette, la disposition et la taille cible pendant que vous testez une seule modification. Répétez le brief complet à chaque nouvel essai, en changeant une seule exigence : demandez par exemple un contour principal plus épais. Les résultats de l’IA peuvent tout de même varier. Comparez-les donc au brief plutôt que d’attendre une géométrie identique. Enregistrez un fichier prometteur avant de lancer une autre génération.

Préparez les images matricielles avant la vectorisation

Dans votre éditeur d’image, recadrez pour supprimer les marges vides et les objets inutiles. Partez d’une source nette et suffisamment grande, pas d’une vignette floue agrandie. Améliorez la séparation entre le sujet et le fond. Réduisez les artefacts de compression, les textures minuscules et les ombres diffuses lorsqu’ils ne font pas partie de l’illustration finale.

Un symbole en aplats aux contours distincts demande généralement moins d’interprétation qu’une photographie avec des cheveux, des reflets ou de la fumée. Décidez quels traits doivent survivre à la simplification. Si le fond doit être supprimé, préparez cette source séparément : une extraction externe facultative du premier plan n’est pas une étape incluse par défaut dans chaque conversion. Vérifiez les contours et couleurs obtenus avant de soumettre un nouvel essai.

Examinez le SVG à des tailles utiles

Contrôlez le résultat à 24 pixels, 48 pixels et à sa taille réelle d’affichage. En petit, cherchez les espaces qui se bouchent, les traits qui disparaissent et les détails qui deviennent du bruit visuel. À la taille prévue, examinez les courbes, l’alignement et les marges internes. Une silhouette nette compte davantage que le nombre de tracés.

Vérifiez le viewBox, qui définit le rectangle de coordonnées interne. Un dessin situé en dehors peut être coupé ; trop d’espace vide peut rendre visuellement minuscule une icône dont les dimensions sont pourtant correctes. Examinez également les points suivants :

• Texte et polices : une police manquante peut modifier la mise en page. Assurez-vous de sa disponibilité ou convertissez le texte en tracés dans votre éditeur vectoriel lorsque cela convient.
• Transparence : prévisualisez sur des fonds clairs et sombres. Une forme blanche n’est pas équivalente à une zone vide et transparente.
• Contenu matriciel incorporé : un SVG peut contenir un élément image qui référence ou incorpore une image matricielle. L’extension .svg ne prouve pas que toute l’illustration est constituée de tracés redimensionnables.

Conservez une source et exportez une copie de livraison

Téléchargez le SVG avant de changer de format. Gardez des fichiers locaux distincts avec des noms explicites, comme cactus-source.svg et cactus-web.svg : ce sont vos propres copies enregistrées. Passez une copie dans le compresseur SVG, puis comparez visuellement le résultat. Conservez la source si l’optimisation modifie l’aspect du dessin.

Utilisez SVG vers PNG lorsque le logiciel destinataire a besoin de pixels, ou SVG vers WebP pour une image web. Préparez les dimensions de sortie souhaitées dans le SVG avant la conversion : une icône de 24 pixels affichée à une densité double demande un export matriciel de 48 pixels. Vérifiez à nouveau transparence et contours dans le fichier exporté. Notre guide des formats explique les compromis.

Corrigez la cause, puis livrez

Si l’icône manque de clarté, simplifiez la silhouette avant d’ajouter des détails. Si la vectorisation produit des petites taches, nettoyez l’image d’entrée plutôt que de répéter la même conversion. Si les bords sont coupés, vérifiez les limites et les marges. Si le texte se déplace, contrôlez les polices. Si l’export semble flou, examinez ses dimensions en pixels et sa taille d’affichage.

Avant la livraison, confirmez le sujet, les couleurs et la lisibilité en petit ; vérifiez les limites et la transparence ; ouvrez le fichier téléchargé à sa destination ; conservez enfin le SVG d’origine avec les exports matriciels nécessaires. Ce dernier contrôle transforme un aperçu séduisant en une ressource réellement utilisable.

Références techniques : introduction à SVG sur MDN, viewBox et l’élément image.