Automated OG Image Generation: Rust + SVG → WebP

For My Second Brain I create programmatical way of generating OG (Open Graph) / hero image. These get’s generated by adding the title of the note to the SVG, but otherwise use a og_template.svg as a template, then converts them to WebP format for optimal web performance.

GitHub and Code

Everything is available under my public second brain repo on GitHub: second-brain-public)

# 2026-04-17

• I updated and added image description to the image
• and I just learned about Twitter:card large image and small!
  • check Twitter

All the code is on my public second brain repo.

1. SVG Template Preparation

   • Create any base SVG (I use 1200x628px) with a black background
   • Add visual aesthetics. I added hexagonal network pattern, grid, and glowing center in gold (#D4AF37)
   • Set fixed header and footer. I used SECOND BRAIN and footer A Digital Vault of Knowledge

2. Dynamic Title Processing

   • Split title into balanced lines (~20 chars each)
   • Auto-adjust font size: 96px (1-2 lines), 84px (3 lines), 72px (4+ lines)
   • Center text between header and footer

3. Image Conversion

   • Generate SVG with text overlay
   • Convert to WebP using ImageMagick: magick input.svg output.webp
   • Images are stored in static/feature/gen folder
   • Skip if Image already exists

4. Markdown Integration

   • This is my Frontmatter in my notes if I want to statically define an image. If no image defined, it will use the generated one.

   1 2 3 4 5 6

   --- title: "Your Title" ogimage: "generated-image-name.webp" ogwidth: 1200 ogheight: 628 ---

Generate Features Images (og-image) of Notes

• OG image for mdBook, my implementation in this PR. More details on mdBook
• shot-scraper: A command-line utility for taking automated screenshots of websites
• How to Dynamically Create Open Graph Images with Cloudinary and Next.js - Braydon Coyer
• An code example with Astro: webpro.nl/src/pages/og/[…route].ts at main · webpro/webpro.nl · GitHub
• Generating SVG with Recraft V3

Below explains how to generate social media preview images (Open Graph images) programmatically using Rust and SVG templates. It’s integrated into my Hugo static site generator workflow (see Makefile) and automatically creates unique images for each published note.

When you tag a note with #publish in your Obsidian vault:

1. The note is copied to the content/ directory
2. A custom OG (Open Graph) image is generated from the note’s title
3. The image is saved as a WebP file for web optimization
4. The frontmatter is updated with the image path
5. Hugo uses this image for social media previews

Rust advantages: Fast performance for batch processing hundreds of notes. I used Python initially for parts, but it was very slow for so many notes
SVG advantages: Easy text manipulation and dynamic content and small file sizes before conversion

1. SVG Template (og_template.svg): A reusable design template with a placeholder for dynamic content
2. Rust Generator (svg_generator.rs): Code that processes titles and injects them into the template
3. ImageMagick: Converts SVG to WebP format for web delivery
4. Makefile Integration: Automated workflow for building and deploying

• Dimensions: 1200 × 630px (standard Open Graph format)
• Aspect Ratio: ~2:1 (optimized for social media platforms)
• Format: SVG → WebP conversion
• Color: My Websites Color Palette

• SVG Template Structure
• Title Processing Logic
• Dynamic Font Sizing Font: size adapts to title length for optimal readability:
• SVG Generation Process
• Image Generation Workflow

Prerequisites:

1
2
3
4
5
6
7

# Required tools
sudo pacman -S imagemagick  # or apt-get install imagemagick
cargo --version              # Rust toolchain

# Environment variables
export secondbrain="/path/to/private/obsidian/vault"
export public_secondbrain="/path/to/this/repo/content"

• Rust code: svg_generator.rs
• Documentation: SVG-design-integration.md

• Prompts for image generation in the first place: My AI Prompts
• Dynamic Feature Images

Origin: X
References: My Second Brain