Markdown SVG 渲染工具升级:支持将动画 SVG 导出为 MP4
评分
72介绍了工具的新功能,尤其是 MP4 导出的实现思路,对已有用户是增量信息。
内容清晰具体,技术细节充分,有示例链接和实际应用场景。
为开发者提供了一个可直接使用的工具和可借鉴的浏览器端视频生成方案。
MP4 功能是当天新发布的,时效性强。
来自作者本人的技术博客,信源可靠。
基础分 80 × T2 信源权重 ×0.9 = 72
精选线 70已入选精选
精选理由
内容具体展示了工具的新能力和技术实现,对关注浏览器端媒体处理的开发者有直接参考价值。
AI 点评
「这个升级最吸引我的是在浏览器里跑完整 FFmpeg 的做法。虽然 30MB 的 wasm 加载有点重,但换来的是无服务器就能生成 MP4,对需要分享动画 SVG 的内容创作者和开发者都很有价值。如果你经常处理 Markdown 中的图形,这个工具值得一试。」
速览
Simon Willison 对其 markdown-svg-renderer 工具进行了大幅升级。该工具可将包含 SVG 的 Markdown 渲染为网页,并提供 PNG、JPEG 及新增的 MP4 导出功能。MP4 功能通过 ffmpeg.wasm 在浏览器内运行完整的 FFMPEG,将动画 SVG 逐帧渲染并编译为视频,解决了不支持 SVG 动画的平台分享问题。工具支持直接粘贴 Markdown 或从 CORS 友好的 URL/Gist 加载。
- 新增 MP4 导出功能,利用 ffmpeg.wasm 在浏览器内将动画 SVG 转换为视频。
- 支持 PNG、JPEG、MP4 多种格式导出,方便在不同平台分享。
- 可通过浏览器直接粘贴 Markdown 或通过 URL/Gist 加载文档。
正文
我在五月开始构建我的markdown-svg-renderer工具,但后来我给它添加了足够多的功能,值得在这里再次讨论。
它已经演变成我理想中的工具,用于分享包含SVG文档的Markdown文本。鉴于我喜欢画骑自行车的鹈鹕的嗜好,这是一个我需要解决的问题!
这个工具非常简单。在浏览器中导航到markdown-svg-renderer,粘贴一些Markdown即可看到渲染结果……或者将该Markdown保存到一个支持CORS的URL或GitHub Gist,然后粘贴指向该文档的URL。
URL选项会给你一个可收藏的页面,例如https://tools.simonwillison.net/markdown-svg-renderer#url=https%3A%2F%2Fgist.github.com%2Fsimonw%2F6f9e48293be5c916652d29f0dc0b0657——它将URL内置到这个Gist中。
如果你访问这个Gist,你会看到原始SVG:

而在渲染工具中,它看起来像这样:

如你所见,Markdown中的那个SVG块已被转换为一个渲染后的SVG(在这个例子中是动画),外加几个标签页。
标签页才是真正有趣的部分。PNG和JPEG标签页会在浏览器中将该SVG渲染为那些图像格式,并让你可以复制或下载它们——这对于在不直接支持SVG的平台上分享非常有用。
MP4标签页是今天新增的——它会检查SVG是否包含动画,尝试猜测循环视频的时长,然后渲染大量动画帧并加载30+MB的ffmpeg.wasm,以便利用编译为WebAssembly并在浏览器中运行的FFMPEG的全部能力,将这些帧编译成MP4视频。
能够将动画SVG转换为MP4,再次使其易于在不原生支持SVG动画的平台上分享。这是个巧妙的技巧!
相关条目
92
精选OpenRouter 推出提示缓存与粘性路由,大幅降低多轮对话成本
对于高频调用 AI API 的开发者,这个功能堪称直接省钱利器。粘性路由保证了缓存命中率,配合 session_id 零配置接入,值得所有使用 OpenRouter 的团队立即尝试。
91
精选ChatGPT Work:可在跨应用和文件中执行操作的AI Agent
我认为这是AI助手从问答走向执行的关键一步。对需要自动化复杂工作流的专业人士尤其值得关注。ChatGPT Work可能成为生产力工具的新范式。
90
精选前沿实验室代理入侵事件技术时间线:2026年7月事件剖析
这篇技术时间线值得所有AI安全研究员和代理开发者细读——它不只是描述一次攻击,而是为整个行业敲响了代理系统防御体系薄弱的警钟。对正在部署自主代理的团队来说,这是必读的灾难预防手册。
90
精选更好的工具反而让Copilot代码审查更糟?GitHub这样改进
这篇博客值得所有AI产品工程师和ML从业者仔细阅读——它打破了'更强大的工具=更好的AI'的直觉,转而强调与Agent推理模式匹配的工程哲学。对正在优化代码审查或类似Agent产品的团队尤其重要。
88
精选OpenRouter 推出统一多模态 API:单端点支持图像、视频、音频、嵌入与转录
这条消息值得所有做多模态AI应用的开发者关注:OpenRouter用联合API解决了模型切换的痛点,特别适合初创团队或快速原型开发。如果你正被多个API密钥和SDK折磨,这个接口可能是你需要的统一层。
87
精选Anthropic 推出 Claude for Teachers:面向教师的教育 AI 工具
这条消息对教育工作者和AI行业观察者都很有价值。Anthropic没有选择通用聊天机器人,而是专门为教师设计了安全可控的工具,这显示出AI在垂直场景落地的正确思路——不是技术炫技,而是切实解决用户痛点。同时,产品内置的安全护栏也值得其他AI公司参考,尤其是在面向儿童或青少年的场景中。
86
精选OpenRouter发布全新Auto Router:用市场智慧优化模型路由
这条更新值得所有用API开发AI应用的人关注。以前选模型靠经验和测试,现在市场数据帮你选。虽然细节不多,但方向很对。对依赖聚合模型服务的团队尤其重要。
86
精选Claude Code v2.1.211 发布:多项修复与改进
作为一个经常使用 Claude Code 进行自动化编码的开发者,我特别关注这次的安全修复,尤其是权限预览字符绕过和自动模式覆盖钩子决策的问题——这些直接关系到团队协作时的安全边界。后台代理报告的改进也让长时间运行的任务更可靠。建议所有使用者尽快升级。