Quand ChatGPT essaye de coder partie 3 : icône SVG

Publié par Fabrice le 30 mars 2023 - Temps de lecture estimé : 3 minutes
Catégories : Webmastering - Étiquettes : IA icône SVG

Troisième et dernière partie consacrée à ChatGPT : la création d'icônes au format SVG.

Les prompts

create a svg code for a cross icon

create a svg code for a Calendar icon

Le code SVG de la croix

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <path d="M12 3v18m-9-9h18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Le code SVG du calendrier

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
  <path fill="none" d="M0 0h24v24H0V0z"/>
  <path d="M17 3h-1V1h-2v2H8V1H6v2H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V5a2 2 0 00-2-2zM7 7h10v2H7V7zm0 4h10v2H7v-2zm4 4h2v2h-2v-2z"/>
</svg>

Le code SVG produit est plutôt propre et léger. L'icône du calendrier comporte tout de même quelques erreurs : la première ligne de code qui ne sert à rien, un nœud inutile et une partie qui n'est pas alignée (voir image ci-dessous).

2 icônes : à gauche, une croix avec ses 4 points, à droite, un calendrier avec deux erreurs : un nœud en trop et la part

Même s'il faut les retravailler et les optimiser, ChatGPT est bien capable de créer des icônes simples. Par contre, impossible de concevoir des figures plus complexes comme un chien, un chat, un donut ou même un bretzel (le résultat ne ressemble vraiment à rien).