Szenario-Abbildungen für Blogbeiträge und technische Artikel

Technik-Blogs, Medium/Substack-Beiträge, GitHub-READMEs und technische Newsletter über autonomes Fahren, selbstfahrende Fahrzeuge und ADAS benötigen regelmäßig eine saubere Szenario-Abbildung: die Kreuzung, die Sie erklären, den Grenzfall, den Sie durchgehen, die Fahrstreifenkonfiguration, über die Ihr Code nachdenkt. drawtonomy eignet sich gut für diese Abbildungen, mit Ausgabeformaten, die für das Web geeignet sind.

Diese Seite ist das Blog-/Artikel-Pendant zu Abbildungen für Papers über autonomes Fahren — derselbe Canvas, andere Ausgabebeschränkungen.

Was Blog- und Artikel-Abbildungen benötigen

Die Anforderungen unterscheiden sich von einer Paper-Abbildung:

• Einbettbar. Die Abbildung muss ohne Konvertierung in einen Markdown-/MDX-/Notion-/Ghost-/Substack-Editor eingefügt werden.
• Hell- und Dunkelmodus-sicher. Viele Technik-Blogs rendern beide. Die Abbildung sollte in beiden lesbar sein oder eine Dunkelmodus-Variante haben.
• Kleine Dateigröße. Ein 4-MB-Rasterbild schadet dem Seitenlade und SEO. SVG oder komprimiertes PNG ist der richtige Standard.
• Social-Card-freundlich. Wenn der Beitrag auf Twitter/LinkedIn/Hacker News geteilt wird, ist das OG-Bild in der Regel die Abbildung. Seitenverhältnis und Lesbarkeit bei kleiner Größe sind wichtig.
• Bearbeitbar. Blogger aktualisieren Beiträge. Die Abbildung muss später bearbeitbar sein, ohne neu zu zeichnen.

drawtonomy-Standardwerte entsprechen diesen Anforderungen gut:

• .drawtonomy.svg (das native SVG-Format von drawtonomy) ist ein gültiges SVG und lässt sich in jedem HTML-/Markdown-/MDX-Kontext einbetten — und es ist in drawtonomy bearbeitbar, wenn der Beitrag aktualisiert wird.
• PNG-Export ist mit hohem DPI verfügbar, wenn SVG nicht unterstützt wird (z. B. LinkedIn-Vorschauen).
• Der unendliche Canvas ermöglicht das Zeichnen einer breiten Abbildung, die sich gut auf OG-Dimensionen zuschneiden lässt.

Empfohlener Workflow

Ein wiederholbarer Workflow für eine typische Blog-Abbildung:

1. Szenario auswählen. Eine Szene, ein Punkt. Nicht versuchen, eine ganze Pipeline in einer einzigen Abbildung zu illustrieren.
2. Auf drawtonomy.com skizzieren. Straßen, Fahrspuren, Kreuzungen, Fahrzeuge, Fußgänger, Pfade, Text-Labels.
3. Für Hell- und Dunkelmodus stilisieren. Farben wählen, die auf #fff und auf #1a1a1a Hintergrund funktionieren. Rein weiße Striche (auf hell unsichtbar) und rein schwarze Striche (auf dunkel unsichtbar) vermeiden. Mittelgraue Striche funktionieren auf beiden gut.
4. Canvas-Ausschnitt festlegen. Die Abbildung so positionieren, dass der relevanteste Teil in der Mitte liegt. Für die Verwendung als OG-Karte etwa 1200 × 630 einrahmen.
5. Als .drawtonomy.svg speichern. Dies ist die bearbeitbare Quelle. Die meisten Blog-Beiträge werden mindestens einmal nach der Veröffentlichung aktualisiert — .drawtonomy.svg ermöglicht, dass jede Aktualisierung eine Bearbeitung statt ein Neuzeichnen ist.
6. Tatsächlich zu liefernde Assets exportieren. Aus derselben Szene:
   • .png bei 1200 × 630 für die OG-Karte (LinkedIn/X/Hacker-News-Vorschauen).
   • Flaches SVG für den Beitragstext, wenn Ihre Blog-Plattform ein einfaches SVG gegenüber der .drawtonomy.svg bevorzugt (die meisten modernen Plattformen akzeptieren beide, da beide gültige SVGs sind).
7. Einbetten. In Ihren Blog-Editor einfügen. Eine Bildunterschrift hinzufügen — Suchmaschinen und Screenreader verlassen sich beide darauf.

Größen und Auflösung

Für SVG spielt die Auflösung keine Rolle; die Abbildung skaliert auf die vom Layout bestimmte Größe. Für PNG nützliche Größen:

Verwendung	Größe
Inline-Blog-Abbildung (ganzer Breite)	1600 × 900
Inline-Blog-Abbildung (halber Breite)	800 × 450
OG / Social Card	1200 × 630
Twitter-Karte	1200 × 600
LinkedIn-Share-Bild	1200 × 627
GitHub-README-Hero	1200 × 600 (oder was Ihr README-Layout verwendet)

Einbettungsbeispiele

In Markdown / MDX (Astro, Next.js, MDX-basierte Blogs):

![Einscherer-Szenario: Ego bei 90 km/h, einscherendes Fahrzeug bei +20 km/h](./einscherer.svg)

In HTML mit Dunkelmodus-Variante:

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="./einscherer-dunkel.svg">
  <img src="./einscherer.svg" alt="Einscherer-Szenario: Ego bei 90 km/h, einscherendes Fahrzeug bei +20 km/h">
</picture>

Stil-Empfehlungen für technische Beiträge

• Eine Szene pro Abbildung. Wenn Sie drei Fälle durchgehen, drei Abbildungen zeichnen.
• Annotationen auf der Abbildung. Kurze Labels wie „TTC = 2,5 s” ersparen dem Leser Augenarbeit; lange Erklärungen gehören in den umgebenden Text.
• Konsistenter Ego-Stil in einer Serie. Wenn der Beitrag Teil einer Serie ist, eine Ego-Farbe wählen und diese über alle Abbildungen beibehalten.
• Keine proprietären Screenshots. Generische, szenariospezifische Abbildungen aus drawtonomy vermeiden die Frage „Ist das aus einem Simulator?” und geben Sicherheit hinsichtlich der Wiederverwendungsrechte.

Wofür das nicht geeignet ist

• Fotorealistische Illustrationen. drawtonomy ist strikt 2D-Vogelperspektive. Für das Rendering der Fahrerperspektive eines Sensors: Simulator-Screenshot verwenden.
• Animationen. drawtonomy exportiert statische Abbildungen. Für animierte Szenario-Erklärungen (z. B. Einscherer über die Zeit): die statische Abbildung exportieren und separat animieren oder den OpenSCENARIO-Export mit esmini für eine aufgezeichnete Wiedergabe verwenden.

Weiterführende Informationen

• Abbildungen für Papers über autonomes Fahren — das akademische Paper-Pendant.
• Folien für Design-Reviews — das Foliendeck-Pendant.
• Einscherer- und Spurwechselszenarien visualisieren — die wiederkehrenden Szenarien, die Sie zeichnen werden.
• Szene exportieren — Details zu SVG / PNG / PDF / EPS.