Le chapitre 4 a laissé vos chiffres propres : sourcés, datés, rangés dans un fichier que l'agent sait relire. Ce chapitre les fait voir, et il commence par un échec instructif : Maya demande son infographie à un générateur d'images, et ses altitudes vérifiées fondent en décor.
On prendra ensuite la voie que j'utilise pour tous mes visuels de données : faire écrire le code du visuel. Le format s'appelle SVG : une image écrite en texte, une recette de dessin que le navigateur exécute, pas une grille de pixels. Un fichier autonome qui s'ouvre d'un double-clic, se corrige à la ligne près et se décline en trois formats dans la même session. Et parce qu'un graphique peut mentir avec des chiffres exacts, on posera aussi les quatre règles qui font qu'on publie sans rougir.
Dimanche soir : « 1 850 m » fond dans l'image
Maya, la torréfactrice du chapitre 1, veut faire voir ses altitudes : data/origines.csv, six origines vérifiées au chapitre 4, du Brésil à 900 m à l'Éthiopie à 2 200 m. Elle fait ce que tout le monde fait en premier : elle demande l'image à un générateur. « Une infographie élégante des altitudes de six origines de café, tons chauds, style épuré. »
Trente secondes plus tard, l'image est belle. Vraiment : la lumière, les petites montagnes stylisées, la typographie douce. Puis l'œil descend sur les chiffres. « 1 850 m » est devenu un décor qui ressemble à un nombre, des glyphes à moitié fondus ; une septième barre s'est invitée ; la source a disparu. Rien n'est faux exprès. Tout est vraisemblable, et c'est pire : cette image aurait pu partir en ligne.
Deux mauvaises voies, et celle de l'atelier
Le générateur écarté, trois voies mènent au visuel de données, et deux sont encore des impasses pour une marque qui se lance. Regardez les infographies qui circulent sur vos réseaux : la plupart sortent d'un outil no-code — les gabarits à remplir, Canva ou Piktochart — et ça se voit.
| La voie | Ce qui vous attend |
|---|---|
| L'outil no-code | Mêmes gabarits, mêmes pictogrammes, mêmes dégradés que tout le monde ; la charte de la marque est approchée par les trois couleurs que le gabarit veut bien accepter. |
| Le graphiste | Un travail superbe, mais hors du budget d'une marque qui se lance, et chaque correction de chiffre repasse par sa file d'attente. |
| L'agent qui écrit le code · la voie de ce guide | Vous lui donnez le fichier de données du chapitre 4 et la charte, il écrit un SVG : la charte exacte, la correction à la ligne près, dans la même session. |
Ce n'est pas une astuce d'initié : même les éditeurs d'outils no-code le reconnaissent, un comparatif publié par Venngage recommande Claude Code pour les infographies écrites en code — HTML, le langage des pages web, et SVG (relevé en août 2026) —, et des skills communautaires dédiées circulent. Pour démarrer, vous n'avez besoin ni des unes ni des autres : un CSV vérifié et une demande précise suffisent. Les schémas de mes guides et les visuels de ce site sortent exactement de cette méthode.
Dès qu'il y a un chiffre, c'est du code
Pourquoi l'image de dimanche soir a-t-elle échoué ? Ce n'est pas une question de prompt — le chapitre 6 montrera ces mêmes générateurs faire des merveilles. Un modèle d'image compose des pixels plausibles, et un chiffre n'a pas le droit d'être plausible : il doit être exact. Les petits textes, les axes, les valeurs sont précisément la zone faible de la génération d'images ; vous venez de le voir sur « 1 850 m ». Le code, lui, affiche ce que le fichier contient. Trois propriétés font la différence.
- 01 · La nettetéLe SVG est vectoriel — la recette se redessine à chaque taille — et le texte reste net, de la vignette LinkedIn à l'écran 4K, sans peser plus lourd.
- 02 · La correction chirurgicaleUn chiffre faux se répare en éditant une ligne du fichier ; sur une image générée, il faut relancer, et tout le reste bouge en même temps que la correction.
- 03 · Le versionnageUn SVG est du texte : git le suit comme le reste du dossier (chapitre 1), la version d'avant existe toujours, et la comparaison montre exactement ce qui a changé entre deux publications.
Une image générée se relance, et tout bouge. Un SVG se corrige, et rien d'autre ne change.
J'ajoute une contrainte de fabrication qui simplifie tout : un visuel égale un fichier autonome. Aucun logiciel à installer, pas de serveur, rien à assembler : le fichier s'ouvre dans un navigateur d'un double-clic, s'envoie tel quel à un client, se colle dans un article. C'est la même philosophie que le reste du studio : des fichiers dans un dossier, pas des exports prisonniers d'une plateforme.
Du CSV de Maya au premier SVG
Maya, la torréfactrice qui lance sa marque de café Braise, a constitué au chapitre 4 son fichier data/origines.csv : six origines, altitudes vérifiées et sourcées, profils de tasse. Ce fichier devient aujourd'hui l'infographie des altitudes de torréfaction, le visuel phare de sa page « nos origines ». La charte, elle, vit déjà dans le dossier : charte.css, un fichier où l'agent a consigné couleurs et polices de Braise la première fois qu'on le lui a demandé. La session commence comme toutes les autres : on fait lire avant de faire produire.
❯ claude ❯ Lis data/origines.csv et décris-le. Ne produis rien. · Claude lit le fichier... 6 origines : altitude_min, altitude_max, profil de tasse. Écart : Brésil 900 m, Éthiopie 2 200 m. ❯ Infographie SVG : une barre par origine, altitudes en ❯ mètres, charte Braise (charte.css). Un fichier autonome, ❯ rien à installer. Ne touche à rien d'autre. · Claude écrit le SVG... Écrit : visuels/altitudes.svg. Barres horizontales, titre, source au pied. Ouvrez-le dans le navigateur.
Itérer sur la lisibilité, pas à l'aveugle
Le premier jet est correct : les barres sont justes, la charte est là. Il n'est pas publiable, et c'est normal. L'écart entre correct et publiable se franchit en itérant sur du concret : vous ouvrez le fichier dans le navigateur, vous le regardez comme un lecteur le regardera, sur un écran de téléphone, et vous demandez des corrections précises. Une par une, comme on relit une page, pas « améliore le design ».
❯ Sur mobile, les étiquettes chevauchent les barres. ❯ Passe-les au-dessus, et monte le contraste du texte. Étiquettes déplacées au-dessus des barres. Texte passé au brun de la charte, contraste 7,2:1 (la norme d'accessibilité demande 4,5 minimum). ❯ Trie par altitude décroissante, ça raconte mieux. Trié. L'Éthiopie ouvre la lecture, le Brésil la ferme. ❯ Titre : « L'altitude fait l'acidité ». Le sujet passe ❯ en sous-titre. Fait. Version 4 : quatre demandes, quatre corrections.
Les quatre règles qui sauvent l'honneur
Un graphique peut mentir avec des chiffres exacts, et c'est même la façon la plus courante de mentir. Ces règles ne sortent pas d'une documentation : elles sortent des graphiques que j'ai vus tordre la réalité en réunion, en quinze ans de métier. Elles tiennent en quatre gestes.
- 01 · L'échelle part de zéroUne barre encode une longueur, et l'œil compare des longueurs. Tronquer l'axe fait raconter à un écart de 10 % ce qu'un écart de 50 % raconterait.
- 02 · Une idée par visuelL'altitude aujourd'hui ; le profil de tasse aura son propre visuel. Trois messages sur une image, zéro message retenu.
- 03 · Le titre dit la conclusionPas le sujet : « Altitudes de nos origines » étiquette, « L'altitude fait l'acidité » enseigne.
- 04 · Source et date au piedEn petit mais lisibles : c'est ce qui sépare une affirmation d'une preuve, et le chapitre 4 vous a coûté assez d'efforts pour le montrer.
Le même graphique, honnête et mensonger
Entre
- L'axe part de zéro : les longueurs des barres sont comparables d'un coup d'œil
- Un visuel, une idée : l'altitude, rien d'autre
- Le titre porte la conclusion : « L'altitude fait l'acidité »
- Source et date au pied : « données vérifiées, août 2026 »
On évite
- L'axe tronqué à 800 m : l'écart entre deux origines paraît trois fois plus grand qu'il n'est
- Altitude, prix, récolte et torréfaction empilés sur la même image
- Le titre teaser : « Ce que l'altitude change (la réponse va vous surprendre) »
- Aucune source : le lecteur doit vous croire sur parole
Ces deux colonnes ne sont pas théoriques : le même fichier produit les deux versions, et je vous conseille de le constater une fois de vos yeux. Demandez le mensonge, pour apprendre à le reconnaître.
❯ Par curiosité : la même infographie, axe tronqué à ❯ 800 m. N'écrase rien, écris un fichier à part. Écrit : visuels/altitudes-tronquee.svg. Une seule ligne diffère : l'axe part de 800 au lieu de 0. ❯ Mets les deux côte à côte. Même CSV, mêmes chiffres. Version honnête : l'Éthiopie fait un peu plus du double du Brésil. Version tronquée : le Brésil se réduit à un trait.
Un seul SVG, trois formats de sortie
L'infographie validée doit vivre à trois endroits : dans l'article de Maya, dans son flux LinkedIn, dans ses stories. Trois formats, et le réflexe d'écraser le même rectangle dans trois cadres produit trois visuels médiocres. La bonne demande est une recomposition : mêmes données, même charte, mais le carré 1:1 grossit le titre et resserre les barres, et le 9:16 empile les origines et gagne un pied d'écran pour l'appel à suivre.
C'est une demande d'une phrase par format, dans la même session, parce que le contexte contient déjà les données, la charte et les corrections. Avec une image générée, chaque format serait une régénération, donc une loterie ; avec un SVG, c'est le même contenu dans trois compositions. Les dimensions qui servent de cible, relevées en août 2026 :
- Article et aperçu de lien1200 × 630 px. Le standard « Open Graph » : la vignette qui s'affiche quand l'article circule.
- LinkedIn, carré 1:11080 × 1080 px. Le format qui occupe le plus de hauteur dans le flux.
- Story et Reel, 9:161080 × 1920 px. Plein écran mobile : titre plus gros, lecture verticale.
- L'exportLe SVG reste le fichier maître ; on exporte un PNG en 2x — deux fois la résolution d'affichage — pour les plateformes qui recompressent.
Quand l'image générée reprend la main
Tout ce chapitre plaide pour le code, alors soyons honnête sur la frontière. Le grain d'un papier kraft, la vapeur au-dessus d'une tasse, l'ambiance d'un atelier de torréfaction au petit matin : aucun SVG ne produira ça, et c'est le territoire du chapitre 6. La règle de partage que j'applique tient en une phrase.
Dès qu'il y a un chiffre, une courbe ou un texte qui doit être exact, c'est du code ; dès que c'est une matière, une lumière ou une émotion, c'est l'atelier image.
Les deux se combinent d'ailleurs très bien : une illustration générée en fond d'ambiance, et les chiffres posés par-dessus en SVG, chacun dans son rôle.
Et les présentations ?
La question arrive à chaque formation : « et pour mes slides ? ». Quand le livrable est un deck plutôt qu'une infographie, la génération directe fait le travail, et trois outils se partagent le terrain.
| L'outil | Pour qui |
|---|---|
| Gamma | La référence pour générer des présentations complètes à partir d'un plan ou d'un document. |
| Canva et son IA intégrée | L'option la plus grand public. |
| Figma AI | Les designers produit qui vivent déjà dans l'outil. |
La frontière est la même que dans tout ce chapitre, déplacée d'un cran : le deck jetable, celui d'une réunion interne ou d'un point client qui ne resservira pas, va chez Gamma, et dix minutes suffisent. Le visuel de marque précis, celui qui porte vos chiffres, votre charte exacte et qui devra être corrigé et redécliné dans six mois, reste un SVG écrit par l'agent, versionné avec le reste du studio.
On ne versionne pas un deck Gamma : on versionne un fichier.
Questions fréquentes sur les infographies avec Claude Code
Comment créer une infographie avec l'IA ?
La voie fiable passe par les données avant le visuel : un fichier CSV aux chiffres vérifiés, puis un agent comme Claude Code qui écrit l'infographie en HTML/SVG, un fichier autonome que vous ouvrez dans le navigateur. Vous itérez ensuite sur la lisibilité par corrections précises, et vous déclinez le même visuel aux formats de vos plateformes. Les générateurs d'images conviennent à l'illustration d'ambiance, pas aux visuels qui portent des chiffres.
Claude peut-il créer des graphiques ?
Oui, en écrivant le code du graphique plutôt qu'en le dessinant : il lit vos données, calcule les échelles et produit un fichier SVG ou HTML autonome. L'avantage sur une image générée est structurel : le texte est net à toutes les tailles, un chiffre se corrige en éditant une ligne sans rien régénérer, et le fichier se versionne dans git comme le reste de votre contenu.
Quel outil pour des infographies de marque ?
Les outils no-code vont vite mais imposent leurs gabarits : la charte est approchée, jamais exacte. Le code applique la charte au pixel et à la couleur près, puisque vous la donnez en référence (fichier de charte, codes couleur, polices) et qu'elle s'applique à chaque nouveau visuel sans la reconstruire. Pour une marque qui publie régulièrement des visuels de données, le fichier SVG maître décliné par formats est l'option la plus cohérente et la moins chère des trois.
La suiteLes visuels de données sont réglés : ils sortent d'un fichier, comme le reste du studio. Restent les images qui font la marque, celles qu'aucune donnée ne décrit : le grain du papier, la vapeur au-dessus de la tasse, la photo du paquet qu'on a envie de prendre en main. Au chapitre 6, l'atelier photo ouvre, et Maya apprend à obtenir l'image exacte qu'elle a en tête.
La suite par email
Recevez les prochains chapitres.
Les guides s'écrivent chapitre par chapitre et se révisent quand les outils bougent. Laissez votre email : un message à chaque publication ou révision majeure, rien d'autre.
Uniquement les publications des guides. Désinscription sur simple réponse.
Pour votre équipe
Ce guide existe aussi en formation.
Le guide donne la méthode, la formation l'installe : une à deux journées avec votre équipe, sur vos projets réels, avec un plan d'outillage à la fin.
Discutons de votre équipeDavid Silvera
Développeur mobile & web freelance · 15 ans · Android, iOS, React Native, Next.js
Ce guide est tiré de ma pratique : les vidéos, les visuels, la musique et les articles de mes projets sortent du pipeline qu'il enseigne, ce site compris. J'accompagne aussi les équipes qui veulent monter en compétence : audit de pratique, formation, mise en place d'outillage.