Figure di scenari per blog e articoli tecnici
Blog di ingegneria, post Medium/Substack, README GitHub e newsletter tecniche sulla guida autonoma necessitano regolarmente di una figura di scenario pulita: l’incrocio che stai spiegando, il caso limite che stai descrivendo, la configurazione delle corsie su cui ragiona il tuo codice. drawtonomy è ragionevole per quelle figure, con formati di output ottimizzati per il web.
Questa pagina è l’analoga blog/articolo di Figure per paper sulla guida autonoma — stessa tela, vincoli di output diversi.
Cosa servono le figure di blog e articoli
Sezione intitolata “Cosa servono le figure di blog e articoli”I vincoli sono diversi da quelli di una figura per un paper:
- Integrabili. La figura deve inserirsi in un editor Markdown/MDX/Notion/Ghost/Substack senza conversione.
- Sicura in modalità chiara/scura. Molti blog di ingegneria renderizzano in entrambe. La figura dovrebbe essere leggibile in entrambi, o avere una variante dark-mode.
- File di piccole dimensioni. Un’immagine raster da 4 MB penalizza il caricamento della pagina e la SEO. SVG o PNG compresso è il default giusto.
- Social-card friendly. Quando il post viene condiviso su Twitter/LinkedIn/Hacker News, l’immagine OG è di solito la figura. L’aspect ratio e la leggibilità a dimensioni ridotte contano.
- Rieditabile. I blogger aggiornano i post. La figura deve essere modificabile in seguito senza ridisegnare.
I default di drawtonomy si adattano bene a questi:
.drawtonomy.svg(il formato SVG nativo di drawtonomy) è un SVG valido, quindi si integra in qualsiasi contesto HTML/Markdown/MDX — e è rieditabile in drawtonomy quando il post necessita di un aggiornamento.- L’esportazione PNG è disponibile con alto DPI quando SVG non è supportato (anteprime LinkedIn, ad esempio).
- La tela infinita permette di disegnare una figura larga che si ritaglia bene alle dimensioni OG.
Flusso di lavoro consigliato
Sezione intitolata “Flusso di lavoro consigliato”Un flusso di lavoro ripetibile per una tipica figura di blog:
- Scegli lo scenario. Una scena, un punto. Non cercare di illustrare un’intera pipeline in una singola figura.
- Abbozza su drawtonomy.com. Strade, corsie, incroci, veicoli, pedoni, percorsi, etichette di testo.
- Stile per sia la modalità chiara che quella scura. Attieniti a colori che sopravvivono su uno sfondo
#fffe su uno#1a1a1a. Evita tratti bianchi puri (invisibili sulla luce) e tratti neri puri (invisibili sul scuro). I tratti grigio medio funzionano bene su entrambi. - Imposta il ritaglio della tela. Posiziona la figura in modo che la parte più rilevante si trovi al centro. Se userai la stessa figura come scheda OG, inquadra a circa 1200 × 630.
- Salva come
.drawtonomy.svg. Questo è il sorgente modificabile. La maggior parte dei post di blog viene aggiornata almeno una volta dopo la pubblicazione — e.drawtonomy.svgfa sì che ogni aggiornamento sia una modifica invece di un ridisegno. - Esporta le risorse che spedirai effettivamente. Dalla stessa scena:
.pnga 1200 × 630 per la scheda OG (anteprime LinkedIn/X/Hacker News).- SVG piatto per il corpo del post se la tua piattaforma di blog preferisce un SVG normale rispetto al
.drawtonomy.svg(la maggior parte delle piattaforme moderne accetta entrambi, poiché sono SVG validi).
- Incorpora. Inserisci nel tuo editor di blog. Aggiungi una didascalia — i motori di ricerca e gli screen reader si affidano entrambi ad essa.
Dimensionamento e risoluzione
Sezione intitolata “Dimensionamento e risoluzione”Per SVG, la risoluzione non importa; la figura si scala a qualsiasi cosa decida il layout. Per PNG, dimensioni utili:
| Uso | Dimensione |
|---|---|
| Figura blog inline (larghezza intera) | 1600 × 900 |
| Figura blog inline (mezza larghezza) | 800 × 450 |
| Scheda OG / social | 1200 × 630 |
| Scheda Twitter | 1200 × 600 |
| Immagine condivisione LinkedIn | 1200 × 627 |
| Hero README GitHub | 1200 × 600 (o qualsiasi layout usi il tuo README) |
A cosa non serve
Sezione intitolata “A cosa non serve”- Illustrazioni fotorealistiche. drawtonomy è strettamente 2D dall’alto. Per render della vista in prima persona di un sensore, usa uno screenshot del simulatore.
- Animazioni. drawtonomy esporta figure statiche. Per spiegazioni animate di scenari (ad es. cut-in nel tempo), esporta la figura statica e anima separatamente, o usa l’esportazione OpenSCENARIO con esmini per una riproduzione registrata.
Letture correlate
Sezione intitolata “Letture correlate”- Figure per paper sulla guida autonoma — l’analogo per paper accademici.
- Slide per la revisione della progettazione — l’analogo per slide deck.
- Visualizzare scenari di cut-in e cambio corsia — gli scenari ricorrenti che disegnerai.
- Esporta la tua scena — dettagli SVG/PNG/PDF/EPS.