Markdown SVG Renderer Upgrades: Export Animated SVGs as MP4
Score
72介绍了工具的新功能，尤其是 MP4 导出的实现思路，对已有用户是增量信息。
内容清晰具体，技术细节充分，有示例链接和实际应用场景。
为开发者提供了一个可直接使用的工具和可借鉴的浏览器端视频生成方案。
MP4 功能是当天新发布的，时效性强。
来自作者本人的技术博客，信源可靠。
Base 80 × T2 Source weight ×0.9 = 72
Curation line 70Selected
Why selected
The post details the tool's new capabilities and technical implementation, offering direct reference value for developers interested in browser-based media processing.
AI commentary
「What I find most compelling is running full FFmpeg inside the browser. The 30MB wasm load is heavy, but it enables serverless MP4 generation, which is valuable for content creators and developers who need to share animated SVGs. If you frequently work with graphics in Markdown, this tool is worth trying.」
Quick overview
Simon Willison has significantly upgraded his markdown-svg-renderer tool, which renders Markdown containing SVG documents in the browser. The tool now offers tabs to export rendered SVGs as PNG, JPEG, and a newly added MP4 format. The MP4 feature examines the SVG for animations, estimates the loop duration, renders frames, and loads over 30MB of ffmpeg.wasm to compile them into an MP4 video entirely within the browser using the full power of FFmpeg compiled to WebAssembly. This makes it easy to share animated SVGs on platforms that don't support SVG natively. Users can paste Markdown directly or load it from a CORS-friendly URL or GitHub Gist via a bookmarkable URL.
- New MP4 export feature converts animated SVGs to video using ffmpeg.wasm entirely in the browser.
- Supports PNG, JPEG, and MP4 export formats for sharing across platforms.
- Load Markdown by pasting directly or via a CORS-friendly URL / GitHub Gist.
Full text
Showing the source text; the full translation is being generated.
I started building my markdown-svg-renderer tool in May, but I've since added enough features to it that it's worth talking about here again.
It's evolved into my ideal tool for sharing Markdown transcripts that include SVG documents. Given my proclivity for drawing pelicans riding bicycles this is a problem that I needed to solve!
The tool is very simple. Navigate to markdown-svg-renderer in your browser and paste in some Markdown to see it rendered... or save that Markdown to a CORS-friendly URL or a GitHub Gist and paste in a URL to that document.
The URL option will give you a bookmarkable page, for example https://tools.simonwillison.net/markdown-svg-renderer#url=https%3A%2F%2Fgist.github.com%2Fsimonw%2F6f9e48293be5c916652d29f0dc0b0657 - which bakes in the URL to this Gist.
If you visit the Gist you'll see raw SVG:
In the rendered tool that looks like this instead:
As you can see, that SVG block in the Markdown has been transformed into a rendered SVG (in this case animated) plus several tabs.
The tabs are the really fun bit. The PNG and JPEG tabs render that SVG to those image formats in the browser and lets you copy or download them - useful for sharing on platforms that don't support SVG directly.
The MP4 tab is new today - it examines the SVG to see if it contains any animations, attempts to guess how long the looped video should be, then renders a whole bunch of frames of the animation and loads 30+MB of ffmpeg.wasm so it can compile those frames into an MP4 video using the full power of FFMPEG compiled to WebAssembly and running in the browser.
Being able to turn an animated SVG into a MP4 again makes it easy to share on platforms that can't support SVG animation natively. It's a neat trick!
Related items
92
FeaturedOpenRouter Launches Prompt Caching with Sticky Routing to Drastically Reduce Multi-Turn Costs
OpenRouter 推出提示缓存与粘性路由，大幅降低多轮对话成本
For developers making frequent AI API calls, this feature is a direct money-saver. Sticky routing guarantees cache hit rates, and session_id requires zero configuration—every OpenRouter user should try it immediately.
91
FeaturedChatGPT Work: An AI Agent That Takes Action Across Apps and Files
ChatGPT Work：可在跨应用和文件中执行操作的AI Agent
I think this is a key step for AI assistants moving from Q&A to execution. Especially noteworthy for professionals who need to automate complex workflows. ChatGPT Work could become a new paradigm for productivity tools.
90
FeaturedAnatomy of a Frontier Lab Agent Intrusion: A Technical Timeline of the July 2026 Incident
前沿实验室代理入侵事件技术时间线：2026年7月事件剖析
This technical timeline is a must-read for all AI security researchers and agent developers—it doesn't just describe one attack but sounds an alarm on the weak defense systems of agent architectures. For teams deploying autonomous agents, this is an essential disaster prevention manual.
90
FeaturedBetter Tools Made Copilot Code Review Worse? Here's How GitHub Improved It
更好的工具反而让Copilot代码审查更糟？GitHub这样改进
This blog post deserves close reading by all AI product engineers and ML practitioners—it breaks the intuition that 'more powerful tools = better AI' and instead emphasizes an engineering philosophy aligned with agent reasoning patterns. Especially important for teams optimizing code review or similar agent-based products.
88
FeaturedOpenRouter Launches Unified Multimodal API: Single Endpoint for Image, Video, Audio, Embeddings, and Transcription
OpenRouter 推出统一多模态 API：单端点支持图像、视频、音频、嵌入与转录
This news is worth attention from all developers building multimodal AI applications: OpenRouter's unified API solves the pain of model switching, especially for startups or rapid prototyping. If you're struggling with multiple API keys and SDKs, this interface could be the unified layer you need.
87
FeaturedAnthropic Launches Claude for Teachers: AI Tools Designed for Educators
Anthropic 推出 Claude for Teachers：面向教师的教育 AI 工具
This announcement is valuable for educators and AI industry watchers alike. Instead of a generic chatbot, Anthropic designed a safety-first tool specifically for teachers, demonstrating the right approach for AI vertical deployment: solving real pain points rather than showing off technology. The built-in guardrails also set a reference for other AI companies, especially when serving scenarios involving children or teenagers.
86
FeaturedOpenRouter Introduces New Auto Router: Model Routing Powered by Market Wisdom
OpenRouter发布全新Auto Router：用市场智慧优化模型路由
This update is worth attention for anyone using APIs to build AI apps. Instead of guessing or testing model selection, market data now does the heavy lifting. Though sparse on details, the direction is right, especially for teams relying on aggregated model services.
86
FeaturedClaude Code v2.1.211 Release: Multiple Fixes and Improvements
Claude Code v2.1.211 发布：多项修复与改进
As a developer who frequently uses Claude Code for automated coding, I'm particularly interested in the security fixes, especially the permission preview character bypass and auto mode overriding hook decisions—these directly affect the security boundaries during team collaboration. The improvement in background agent reporting also makes long-running tasks more reliable. I recommend all users upgrade as soon as possible.