Skip to content
drawtonomy drawtonomy

Scenario figures for blog posts and technical articles

Engineering blogs, Medium / Substack posts, GitHub READMEs, and technical newsletters about autonomous driving, self-driving, and ADAS regularly need a clean scenario figure: the intersection you’re explaining, the corner case you’re walking through, the lane configuration your code reasons about. drawtonomy is reasonable for those figures, with output formats tuned for the web.

This page is the blog / article analogue of Figures for autonomous driving papers — same canvas, different output constraints.

What blog and article figures need

Section titled “What blog and article figures need”

The constraints are different from a paper figure:

  • Embeddable. The figure has to drop into a Markdown / MDX / Notion / Ghost / Substack editor without conversion.
  • Light / dark mode safe. Many engineering blogs render in both. The figure should be readable in either, or have a dark-mode variant.
  • Small file size. A 4 MB raster image hurts page-load and SEO. SVG or compressed PNG is the right default.
  • Social-card friendly. When the post is shared on Twitter / LinkedIn / Hacker News, the OG image is usually the figure. Aspect ratio and legibility at small size matter.
  • Re-editable. Bloggers update posts. The figure needs to be editable later without redrawing.

drawtonomy’s defaults map cleanly to these:

  • .drawtonomy.svg (drawtonomy’s native SVG format) is a valid SVG, so it embeds in any HTML / Markdown / MDX context — and it’s re-editable in drawtonomy when the post needs an update.
  • PNG export is available with high DPI when SVG isn’t supported (LinkedIn previews, for example).
  • The infinite canvas lets you draw a wide figure that crops nicely to OG dimensions.
Section titled “Recommended workflow”

A repeatable workflow for a typical blog figure:

  1. Pick the scenario. One scene, one point. Don’t try to illustrate a whole pipeline in a single figure.
  2. Sketch on drawtonomy.com. Roads, lanes, intersections, vehicles, pedestrians, paths, text labels.
  3. Style for both light and dark mode. Stick to colours that survive on a #fff and on a #1a1a1a background. Avoid pure white strokes (invisible on light) and pure black strokes (invisible on dark). Mid-grey strokes work well on both.
  4. Set the canvas crop. Position the figure so the most relevant part sits in the middle. If you’ll use the same figure as an OG card, frame at roughly 1200 × 630.
  5. Save as .drawtonomy.svg. This is the editable source. Most blog posts get updated at least once after publishing — typo fixes, follow-up corrections, “I added a related diagram in a sequel post” — and .drawtonomy.svg lets every update be an edit instead of a redraw.
  6. Export the assets you actually ship. From the same scene:
    • .png at 1200 × 630 for the OG card (LinkedIn / X / Hacker News previews).
    • Flat SVG for the body of the post if your blog platform prefers a plain SVG over the .drawtonomy.svg (most modern platforms accept either, since both are valid SVGs).
  7. Embed. Drop into your blog editor. Add a caption — search engines and screen readers both rely on it.

Sizing and resolution

Section titled “Sizing and resolution”

For SVG, resolution doesn’t matter; the figure scales to whatever the layout decides. For PNG, useful sizes:

UseSize
Inline blog figure (full-width)1600 × 900
Inline blog figure (half-width)800 × 450
OG / social card1200 × 630
Twitter card1200 × 600
LinkedIn share image1200 × 627
GitHub README hero1200 × 600 (or whatever your README layout uses)

Embedding examples

Section titled “Embedding examples”

In Markdown / MDX (Astro, Next.js, MDX-based blogs):

![Cut-in scenario: ego at 90 km/h, cutting-in vehicle at +20 km/h](./cut-in.svg)

In HTML with a dark-mode variant:

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="./cut-in-dark.svg">
  <img src="./cut-in.svg" alt="Cut-in scenario: ego at 90 km/h, cutting-in vehicle at +20 km/h">
</picture>

In a GitHub README with social-card metadata (when paired with og-image or similar):

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

Style suggestions for technical posts

Section titled “Style suggestions for technical posts”
  • One scenario per figure. If you’re walking the reader through three cases, draw three figures.
  • Annotations on the figure. Short labels (“TTC = 2.5 s”) embedded in the figure save the reader’s eyes; long explanations go in the surrounding text.
  • Consistent ego style across a series. If the post is part of a series, pick one ego colour and keep it across all figures.
  • No proprietary screenshots. Generic, scenario-flavoured figures from drawtonomy avoid the “is this from a simulator?” question and give you confidence about reuse rights.

What this isn’t for

Section titled “What this isn’t for”
  • Photorealistic illustrations. drawtonomy is strictly top-down 2D. For renders of a sensor’s first-person view, use a simulator screenshot.
  • Animations. drawtonomy exports static figures. For animated scenario explainers (e.g. cut-in over time), export the static figure and animate separately, or use the OpenSCENARIO export with esmini for a recorded playback.
Section titled “Related reading”