技術部落格與文章的場景配圖

自動駕駛、自駕與 ADAS 相關的工程部落格、Medium / Substack 文章、GitHub README 與技術電子報，經常需要一張整潔的場景配圖：您正在說明的路口、您正在分析的邊界案例、您的程式碼所推理的車道配置。drawtonomy 適合製作這類配圖，輸出格式針對網路最佳化。

本頁是自動駕駛論文的配圖的部落格 / 文章版本——相同的畫布，不同的輸出限制。

部落格與文章配圖的需求

與論文配圖相比，限制有所不同：

• 可嵌入。 配圖必須能直接放入 Markdown / MDX / Notion / Ghost / Substack 編輯器，無需轉換。
• 淺色 / 深色模式安全。 許多工程部落格兩種模式都有。配圖在兩種模式下都應清晰，或準備深色模式變體。
• 檔案大小小。 一張 4 MB 的點陣圖影響頁面載入速度與 SEO。SVG 或壓縮 PNG 是正確的預設選擇。
• 社群媒體卡片友善。 文章在 Twitter / 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（大多數現代平台兩者都接受，因為兩者都是有效的 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 嚴格是俯視二維。感測器第一人稱視角請使用模擬器截圖。
• 動畫。 drawtonomy 匯出靜態配圖。對於動畫場景說明（例如隨時間推移的切入），匯出靜態配圖後另行製作動畫，或使用 OpenSCENARIO 匯出搭配 esmini 進行錄製重播。

延伸閱讀

• 自動駕駛論文的配圖 — 學術論文的對應做法。
• 設計審查投影片 — 投影片的對應做法。
• 視覺化切入與換道場景 — 您將繪製的反覆出現場景。
• 匯出您的場景 — SVG / PNG / PDF / EPS 詳情。