Figure di scenari per blog e articoli tecnici

Blog tecnici, post su Medium / Substack, README su GitHub e newsletter sulla guida autonoma hanno regolarmente bisogno di una figura di scenario pulita e professionale: l’intersezione che stai spiegando, il caso limite che stai analizzando, la configurazione di corsie che il tuo codice utilizza. drawtonomy è una scelta ragionevole per quelle figure, con formati di output ottimizzati per il web.

Questa pagina è l’analogo per blog e articoli di Figure per articoli accademici sulla guida autonoma — stesso canvas, vincoli di output diversi.

Cosa richiedono le figure per blog e articoli

I vincoli sono diversi da una figura di un articolo accademico:

• Incollabili direttamente. La figura deve potersi inserire in un editor Markdown / MDX / Notion / Ghost / Substack senza conversioni.
• Compatibili con light e dark mode. Molti blog tecnici supportano entrambi i temi. La figura dovrebbe risultare leggibile in entrambi, oppure avere una variante per dark mode.
• Dimensioni contenute. Un’immagine raster di 4 MB rallenta il caricamento e penalizza l’SEO. SVG o PNG compresso è il formato corretto.
• Ottimizzate per social card. Quando il post viene condiviso su Twitter / LinkedIn / Hacker News, l’immagine OG è solitamente la figura stessa. Il rapporto d’aspetto e la leggibilità in piccolo sono importanti.
• Modificabili in seguito. I blogger aggiornano i post. La figura deve poter essere modificata in seguito senza dover essere disegnata da zero.

I default di drawtonomy si mappano perfettamente con questi vincoli:

• .drawtonomy.svg (il formato SVG nativo di drawtonomy) è un SVG valido, quindi si incorpora in qualsiasi contesto HTML / Markdown / MDX — e rimane modificabile in drawtonomy quando il post ha bisogno di aggiornamenti.
• Esportazione PNG è disponibile con alta risoluzione quando SVG non è supportato (ad esempio nei preview di LinkedIn).
• Il canvas infinito ti permette di disegnare figure larghe che si ritagliano bene in dimensioni OG standard.

Flusso di lavoro consigliato

Un flusso di lavoro ripetibile per una figura di blog tipica:

1. Scegli lo scenario. Una scena, un concetto. Non cercare di illustrare un’intera pipeline in una sola figura.
2. Disegna su drawtonomy.com. Strade, corsie, intersezioni, veicoli, pedoni, percorsi, etichette di testo.
3. Stilizza per light e dark mode. Scegli colori che rimangono leggibili sia su sfondo #fff che su #1a1a1a. Evita tracce bianco puro (invisibile su sfondo chiaro) e tracce nero puro (invisibile su sfondo scuro). Tracce grigio medio funzionano bene in entrambi i casi.
4. Imposta il ritaglio del canvas. Posiziona la figura in modo che la parte più rilevante stia al centro. Se utilizzerai la stessa figura come social card, inquadra a circa 1200 × 630.
5. Salva come .drawtonomy.svg. Questo è il file sorgente modificabile. La maggior parte dei blog viene aggiornata almeno una volta dopo la pubblicazione — correzioni di typo, correzioni successive, “ho aggiunto un diagramma correlato in un post di seguito” — e .drawtonomy.svg rende ogni aggiornamento un’edit invece di un disegno da capo.
6. Esporta gli asset che effettivamente utilizzerai. Dalla stessa scena:
   • .png a 1200 × 630 per la social card (preview di LinkedIn / X / Hacker News).
   • SVG piatto per il corpo del post se la tua piattaforma di blog preferisce un SVG ordinario rispetto a .drawtonomy.svg (la maggior parte delle piattaforme moderne accetta entrambi, poiché sono SVG validi).
7. Incorpora. Inserisci nell’editor del tuo blog. Aggiungi una didascalia — search engine e screen reader dipendono da essa.

Dimensioni e risoluzione

Per SVG, la risoluzione non importa; la figura si scala a qualunque dimensione il layout decida. Per PNG, dimensioni utili:

Utilizzo	Dimensioni
Figura blog incorporata (full-width)	1600 × 900
Figura blog incorporata (half-width)	800 × 450
OG / social card	1200 × 630
Social card Twitter	1200 × 600
Immagine di condivisione LinkedIn	1200 × 627
Hero GitHub README	1200 × 600 (o quello che il tuo layout README usa)

Esempi di incorporamento

In Markdown / MDX (Astro, Next.js, blog basati su MDX):

![Scenario cut-in: ego a 90 km/h, veicolo in sorpasso a +20 km/h](./cut-in.svg)

In HTML con variante dark mode:

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="./cut-in-dark.svg">
  <img src="./cut-in.svg" alt="Scenario cut-in: ego a 90 km/h, veicolo in sorpasso a +20 km/h" loading="lazy" decoding="async">
</picture>

In un README di GitHub con metadata di social card (quando abbinato a og-image o simile):

![Figura scenario cut-in](./docs/img/cut-in.png)

Suggerimenti di stile per articoli tecnici

• Uno scenario per figura. Se stai guidando il lettore attraverso tre casi, disegna tre figure.
• Annotazioni sulla figura. Etichette brevi (“TTC = 2.5 s”) incorporate nella figura fanno risparmiare sforzo al lettore; le spiegazioni lunghe vanno nel testo circostante.
• Stile ego coerente in una serie. Se l’articolo è parte di una serie, scegli un colore per l’ego e mantienilo coerente in tutte le figure.
• Nessuno screenshot proprietario. Figure generiche incentrate su scenari da drawtonomy evitano la domanda “è questo da un simulatore?” e ti danno sicurezza sui diritti di riutilizzo.

Quello che non è per

• Illustrazioni fotorealistiche. drawtonomy è rigorosamente 2D dall’alto. Per render della vista in prima persona di un sensore, usa uno screenshot di un simulatore.
• Animazioni. drawtonomy esporta figure statiche. Per spiegatori di scenario animati (ad es. cut-in nel tempo), esporta la figura statica e anima separatamente, oppure usa l’esportazione OpenSCENARIO con esmini per una riproduzione registrata.

Letture correlate

• Figure per articoli accademici sulla guida autonoma — l’analogo per articoli accademici.
• Diapositive per design review — l’analogo per deck di diapositive.
• Visualizzare scenari cut-in e lane change — gli scenari ricorrenti che disegnerai.
• Esporta la tua scena — dettagli su SVG / PNG / PDF / EPS.