BusyBee3333/svgshot
SVGShot — Animated SVG creator & screenshot tool with CSS animation-aware capture. Render, filmstrip, and diff animated SVGs the way users actually see them.
Platform-specific configuration:
{
"mcpServers": {
"svgshot": {
"command": "npx",
"args": [
"-y",
"svgshot"
]
}
}
}Add the config above to .claude/settings.json under the mcpServers key.
> Create, preview, and QA animated SVGs with CSS animation-aware screenshots. The open-source animated SVG creator tool that captures what users actually see — not a blank screen at t=0.
[](LICENSE) [](https://nodejs.org) [](https://modelcontextprotocol.io)
Every SVG screenshot tool renders at t=0 — the instant the page loads. CSS animations that start with opacity: 0 are invisible in the screenshot, even though users see them animate in within milliseconds.
Your animated SVGs look empty in previews, CI screenshots, and AI-assisted design workflows.
SVGShot fixes this with animation-aware capture modes that screenshot your SVGs the way users actually experience them.
git clone https://github.com/BusyBee3333/svgshot.git
cd svgshot
npm install
npx playwright install chromium
npm start
# Server running at http://localhost:3700The core innovation — four w
Loading reviews...