Figures de scénarios pour blogs et articles techniques

Les blogs d’ingénierie, articles Medium / Substack, README GitHub et newsletters techniques sur la conduite autonome, le véhicule autonome et l’ADAS ont régulièrement besoin d’une figure de scénario propre : l’intersection que vous expliquez, le cas limite que vous détaillez, la configuration de voie sur laquelle raisonne votre code. drawtonomy convient pour ces figures, avec des formats de sortie adaptés au web.

Cette page est l’équivalent blog / article de Figures pour articles de conduite autonome — même canevas, contraintes de sortie différentes.

Ce que les figures de blog et d’article nécessitent

Les contraintes diffèrent d’une figure d’article académique :

Intégrable. La figure doit pouvoir être déposée dans un éditeur Markdown / MDX / Notion / Ghost / Substack sans conversion.
Compatible mode clair / sombre. De nombreux blogs d’ingénierie s’affichent dans les deux modes. La figure doit être lisible dans l’un ou l’autre, ou avoir une variante mode sombre.
Taille de fichier réduite. Une image raster de 4 Mo nuit aux performances de la page et au SEO. SVG ou PNG compressé est la valeur par défaut appropriée.
Adaptée aux cartes sociales. Quand l’article est partagé sur Twitter / LinkedIn / Hacker News, l’image OG est généralement la figure. Le ratio d’aspect et la lisibilité en petite taille comptent.
Ré-éditable. Les blogueurs mettent à jour leurs articles. La figure doit être modifiable sans redessin.

Les valeurs par défaut de drawtonomy correspondent bien à ces besoins :

.drawtonomy.svg (le format SVG natif de drawtonomy) est un SVG valide, donc il s’intègre dans tout contexte HTML / Markdown / MDX — et il est ré-éditable dans drawtonomy quand l’article nécessite une mise à jour.
L’export PNG est disponible avec haute résolution quand le SVG n’est pas supporté (aperçus LinkedIn, par exemple).
Le canevas infini vous permet de dessiner une figure large qui se recadre bien aux dimensions OG.

Workflow recommandé

Un workflow reproductible pour une figure de blog typique :

Choisissez le scénario. Une scène, un point. N’essayez pas d’illustrer tout un pipeline dans une seule figure.
Esquissez sur drawtonomy.com. Routes, voies, intersections, véhicules, piétons, chemins, labels texte.
Stylisez pour les deux modes. Restez sur des couleurs qui survivent sur un fond #fff et sur #1a1a1a. Évitez les traits purement blancs (invisibles sur fond clair) et purement noirs (invisibles sur fond sombre). Les traits gris intermédiaires fonctionnent bien dans les deux cas.
Définissez le recadrage du canevas. Positionnez la figure de sorte que la partie la plus pertinente soit au centre. Si vous utilisez la même figure comme carte OG, cadrez à environ 1200 × 630.
Sauvegardez en .drawtonomy.svg. C’est la source éditable. La plupart des articles de blog sont mis à jour au moins une fois après publication — corrections de fautes, corrections de suivi, « j’ai ajouté un diagramme connexe dans un article suivant » — et .drawtonomy.svg fait de chaque mise à jour une modification plutôt qu’un redessin.
Exportez les assets que vous livrez réellement. Depuis la même scène :
- .png à 1200 × 630 pour la carte OG (aperçus LinkedIn / X / Hacker News).
- SVG plat pour le corps de l’article si votre plateforme de blog préfère un SVG simple au .drawtonomy.svg (la plupart des plateformes modernes acceptent les deux, car ce sont des SVG valides).
Intégrez. Déposez dans votre éditeur de blog. Ajoutez une légende — les moteurs de recherche et les lecteurs d’écran en dépendent.

Dimensionnement et résolution

Pour le SVG, la résolution n’a pas d’importance ; la figure s’adapte à ce que décide la mise en page. Pour le PNG, quelques tailles utiles :

Utilisation	Taille
Figure de blog intégrée (pleine largeur)	1600 × 900
Figure de blog intégrée (demi-largeur)	800 × 450
OG / carte sociale	1200 × 630
Carte Twitter	1200 × 600
Image de partage LinkedIn	1200 × 627
Hero README GitHub	1200 × 600 (ou selon votre mise en page README)

Pour aller plus loin

Figures pour articles de conduite autonome — l’équivalent article académique.
Diapositives pour revue de conception — l’équivalent diaporama.
Visualiser les scénarios de dépassement brusque et de changement de voie — les scénarios récurrents que vous dessinerez.
Exporter votre scène — détails SVG / PNG / PDF / EPS.