Native SVG Output Support & Window Bar Customization - Working Implementation Available

[jackspirou]

Hey VHS community! 👋

I've been working on a fork (with Claude Code) that addresses several frequently requested features, and I want to share it to see if a version of these enhancements could go back to the main VHS project. The fork is fully functional and available at agentstation/vhs with comprehensive tests and documentation.

🎯 Implemented Features

1. Native SVG Output

This addresses numerous issues:

• Direct SVG requests (#109, #165)
• Blurry output concerns (#625 - "output looks very blurry", #69 - "Gif looks blurry")
• File size optimization (in some cases SVG can help with this) (#50, #109 - users wanting smaller files)
• Scalability needs (#578 - responsive dimensions)
• Text selection possibilities (#66 - copying text from recordings)

How it works:

• Generates animated SVGs using CSS animations and frame deduplication
• Each unique terminal state is rendered once, with CSS keyframes handling transitions
• Text remains selectable and searchable (addressing #66)
• Scales perfectly on any display without pixelation
• Built-in optimization with optional --no-svg-opt flag

Performance characteristics:

• Simple demos: Often 50-90% smaller than GIFs for simple .tape files
• Complex outputs (like neofetch): May be larger due to preserving exact character styling
• An example: simple-demo.gif (82KB) → simple-demo.svg (19KB) - 77% smaller!

2. Window Bar Customization

This directly addresses:

• #436 - "Add Command to 'Set Title' for Window"
• Professional branding needs mentioned in #173, #460
• Font customization requests from discussion #379

New commands:

Set WindowBarTitle "My Custom Demo"
Set WindowBarFontFamily "Monaco" 
Set WindowBarFontSize 16

3. Enhanced CLI Options

• --debug-console: Browser console logging for debugging
• --no-svg-opt: Control SVG optimization
• Multiple output formats in one command

📊 Technical Implementation

The SVG generation works by:

1. Capturing terminal frames with full color and style information
2. Deduplicating identical frames to reduce file size
3. Generating CSS classes for common color combinations
4. Using CSS animations for smooth transitions
5. Preserving whitespace with xml:space="preserve"
6. Escaping special characters for security

All features include test coverage (~70-95% for new code) and maintain backward compatibility.

🤝 Contributing Back

I'm very interested in getting some of these features back to the main VHS project, especially SVG generation. The implementation:

• Maintains all existing functionality
• Adds no new required dependencies (nothing in addition to ttyd and ffmpeg)
• Includes decent tests
• Is documented with examples
• Has been tested across platforms (tested with github-actions runner)

🔗 Try It Out

You can test the fork today:

# macOS/Linux with Homebrew
brew install agentstation/tap/vhs

# Or with Go
go install github.com/agentstation/vhs@latest

Looking forward to your thoughts and feedback! I'm happy to let maintainers or whoever take it over and pick through it to include a version of the SVG generation

---

Related issues: #109, #165, #625, #69, #50, #578, #66, #436, #173, #460, #339, #379

[NCMBianchi]

Tested and it works great, although I still get the speeding issue. But the addition of SVG support is very welcome.

[mikelorant]

If we continue to stick with Chromium headless browser controlled by Rod, we will always have speed issues as well as timing problems when sending commands. Having SVG output is a fantastic addition but the architecture for how we get the frames is still flawed.