---
title: "Markdown SVG 渲染工具升级：支持将动画 SVG 导出为 MP4"
source: "Simon Willison 博客（Atom）"
source_tier: "t2"
url: "https://simonwillison.net/2026/Aug/16/markdown-svg-upgrades/"
permalink: "https://feed.astralor.com/items/itm_aa3e0a70376ad35491b93e78"
published: "2026-08-16T23:59:37.000Z"
score: 72
channel: "tech"
tags: ["ffmpeg.wasm","Markdown","markdown-svg-renderer","SVG","浏览器端渲染"]
---

# Markdown SVG 渲染工具升级：支持将动画 SVG 导出为 MP4

## 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 加载文档。

## 全文

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! Tags: svg, markdown, tools

---

引用前请核对原文;本文由星际流动整理:https://feed.astralor.com/items/itm_aa3e0a70376ad35491b93e78