博客和技术文章中的场景配图

自动驾驶、自动驾驶领域的工程博客、Medium / Substack 文章、GitHub README 和技术通讯经常需要一张简洁的场景图：你正在解释的路口、你正在展示的边界场景、你的代码推理所基于的车道配置。drawtonomy 适合制作这类配图，其输出格式针对 Web 进行了调整。

本页是自动驾驶论文中的场景图的博客/文章版本——同一画布，不同的输出约束。

博客和文章配图的需求

与论文配图的约束不同：

• 可嵌入。 图表必须能无需转换地放入 Markdown / MDX / Notion / Ghost / Substack 编辑器。
• 适应亮色/深色模式。 许多工程博客两种模式都支持，图表在两种模式下都应可读，或提供深色模式变体。
• 文件体积小。 4 MB 光栅图像会影响页面加载和 SEO。SVG 或压缩 PNG 是默认正确选择。
• 适合社交卡片。 文章分享到 X / LinkedIn / Hacker News 时，OG 图像通常就是这张配图。宽高比和小尺寸下的可读性很重要。
• 可再编辑。 博主会更新文章。图表应该可以在不重绘的情况下进行编辑。

drawtonomy 的默认值与这些需求契合：

• .drawtonomy.svg（drawtonomy 原生 SVG 格式）是合法的 SVG，可嵌入任何 HTML / Markdown / MDX 上下文——同时文章需要更新时可在 drawtonomy 中重新编辑。
• PNG 导出在 SVG 不受支持时（如 LinkedIn 预览）提供高 DPI 选项。
• 无限画布让你绘制一张宽图，并裁剪成 OG 尺寸。

推荐工作流

典型博客配图的可复用工作流：

1. 选定场景。 一张图，一个论点。不要试图在单张图中说明整个流水线。
2. 在 drawtonomy.com 上草绘。 道路、车道、路口、车辆、行人、路径、文字标签。
3. 针对亮色和深色模式调整样式。 坚持在 #fff 和 #1a1a1a 背景下都能存活的颜色。避免纯白描边（亮色下不可见）和纯黑描边（深色下不可见）。中灰描边在两种模式下都表现良好。
4. 设置画布裁剪区域。 让最关键的内容位于中心。若同一图将用作 OG 卡片，按约 1200 × 630 构图。
5. 保存为 .drawtonomy.svg。 这是可编辑源文件。大多数博文发布后至少会更新一次——拼写修正、后续更正、“我在续篇中添加了相关图表”——.drawtonomy.svg 让每次更新都是编辑而非重绘。
6. 导出实际发布的资产。 从同一场景：
   • .png 1200 × 630 用于 OG 卡片（LinkedIn / X / Hacker News 预览）。
   • 平面 SVG 用于博文正文（如果你的博客平台偏好纯 SVG 而非 .drawtonomy.svg，大多数现代平台两者都接受）。
7. 嵌入。 放入博客编辑器。添加图注——搜索引擎和屏幕阅读器都依赖它。

尺寸与分辨率

对于 SVG，分辨率无关紧要，图表会缩放到布局决定的任意大小。对于 PNG，常用尺寸：

用途	尺寸
全宽内联博客配图	1600 × 900
半宽内联博客配图	800 × 450
OG / 社交卡片	1200 × 630
Twitter 卡片	1200 × 600
LinkedIn 分享图	1200 × 627
GitHub README 主图	1200 × 600（或你的 README 布局所需尺寸）

嵌入示例

在 Markdown / MDX（Astro、Next.js、基于 MDX 的博客）：

![切入场景：主车 90 km/h，切入车辆相对速度 +20 km/h](./cut-in.svg)

在 HTML 中带深色模式变体：

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="./cut-in-dark.svg">
  <img src="./cut-in.svg" alt="切入场景：主车 90 km/h，切入车辆相对速度 +20 km/h">
</picture>

在 GitHub README 中：

![切入场景图](./docs/img/cut-in.png)

技术文章配图风格建议

• 每张图一个场景。 如果你要展示三种情况，画三张图。
• 在图表上直接标注。 图表中嵌入的短标签（“TTC = 2.5 s”）能节省读者的眼力；长说明放在周围文字中。
• 系列文章中保持统一的主车风格。 如果这是系列文章，选定一种主车颜色并贯穿所有图表。
• 不用专有截图。 drawtonomy 生成的通用场景风格配图不会引发”这是从哪个仿真器截的？“之类的疑问，同时你对复用权有把握。

不适用的情况

• 逼真插图。 drawtonomy 严格采用俯视 2D 视角。传感器第一人称视图请使用仿真器截图。
• 动画。 drawtonomy 导出静态图表。对于动态场景解说（如随时间展开的切入动作），导出静态图表后单独制作动画，或使用带 esmini 的 OpenSCENARIO 导出录制回放。

延伸阅读

• 自动驾驶论文中的场景图 — 学术论文版本。
• 设计评审幻灯片 — 幻灯片版本。
• 切入与变道场景可视化 — 你将频繁绘制的常见场景。