---
title: "Markdown SVG Renderer Upgrades: Export Animated SVGs as 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","Browser-based rendering"]
---

# Markdown SVG Renderer Upgrades: Export Animated SVGs as MP4

## 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.

## At a glance

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.

## Key points

- 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

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

---

Verify against the original before citing; curated by Astral Feed: https://feed.astralor.com/items/itm_aa3e0a70376ad35491b93e78