Markdown SVG upgrades

Simon Willison's Blog Tools

Summary

Simon Willison's markdown-svg-renderer tool has been upgraded with features to render Markdown with embedded SVG to formats like PNG, JPEG, and MP4 using ffmpeg.wasm in the browser.

No content available
Original Article
View Cached Full Text

Cached at: 08/17/26, 03:43 AM

# Markdown SVG upgrades Source: [https://simonwillison.net/2026/Aug/16/markdown-svg-upgrades/](https://simonwillison.net/2026/Aug/16/markdown-svg-upgrades/) 16th August 2026 I started building my[markdown\-svg\-renderer](https://tools.simonwillison.net/markdown-svg-renderer)tool[in May](https://tools.simonwillison.net/colophon#markdown-svg-renderer.html), 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](https://simonwillison.net/tags/pelican-riding-a-bicycle/)this is a problem that I needed to solve\! The tool is very simple\. Navigate to[markdown\-svg\-renderer](https://tools.simonwillison.net/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](https://tools.simonwillison.net/markdown-svg-renderer#url=https%3A%2F%2Fgist.github.com%2Fsimonw%2F6f9e48293be5c916652d29f0dc0b0657)\- which bakes in the URL to[this Gist](https://gist.github.com/simonw/6f9e48293be5c916652d29f0dc0b0657)\. If you visit[the Gist](https://gist.github.com/simonw/6f9e48293be5c916652d29f0dc0b0657)you'll see raw SVG: ![beautiful-circle.md. Here's a self-contained SVG — a "compass study" of a circle with construction lines, a slowly rotating tick ring, and an orbiting accent dot: a block of SVG code](https://static.simonwillison.net/static/2026/raw-svg.webp) In the rendered tool that[looks like this](https://tools.simonwillison.net/markdown-svg-renderer#url=https%3A%2F%2Fgist.github.com%2Fsimonw%2F6f9e48293be5c916652d29f0dc0b0657)instead: ![The same text, but now the code block has been replaced by a tabbed panel. The selected tab reads "Rendered" and shows the rendered PNG. The other tabs are PNG, JPEG, MP4, and Code](https://static.simonwillison.net/static/2026/rendered-svg.webp) 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](https://github.com/simonw/tools/commit/73e0327f6df9887ba2a9f9f16a2d06a45451d248)\- 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](https://github.com/ffmpegwasm/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\!

Similar Articles

markdown-svg-renderer

Simon Willison's Blog

A markdown rendering tool that supports live preview, table and code block formatting, and special handling for SVG code blocks with inline preview and tabbed code view.

LaTeX renderer

Simon Willison's Blog

Simon Willison 发布了一款 LaTeX 渲染工具,支持 MathJax 单公式渲染与 faster-latex 整篇文档排版,具备实时预览,并将源码存储在 URL fragment 中以便分享链接,灵感来自 Tiny Little Office 的无服务器文档方案。