Markdown SVG upgrades

Simon Willison launched his markdown-svg-renderer tool in May, and has since expanded its capabilities enough to warrant a new discussion. This tool serves as his preferred method for sharing Markdown transcripts that incorporate SVG documents, a particular interest given his penchant for illustrations of pelicans riding bicycles.

The tool is straightforward to use. Simply visit markdown-svg-renderer in your web browser, input some Markdown, and the content will be rendered. Alternatively, you can save the Markdown to a CORS-friendly URL or a GitHub Gist, then paste that URL into the tool. This option creates a bookmarkable page, such as https://tools.simonwillison.net/markdown-svg-renderer#url=https%3A%2F%2Fgist.github.com%2Fsimonw%2F6f9e48293be5c916652d29f0dc0b0657, which incorporates the URL to the Gist.

Upon rendering, the tool transforms the SVG block in the Markdown into an animated SVG, supplemented by several tabs. These tabs add functionality; the PNG and JPEG tabs convert the SVG into those image formats in the browser, allowing for easy copying or downloading. These features are particularly beneficial for sharing content on platforms that do not natively support SVG.

Today, a new tab has been added - the MP4 tab. This feature analyzes the SVG for animations, estimates the duration of the looped video, and renders a large number of frames of the animation. It then loads 30+MB of ffmpeg.wasm to compile these frames into an MP4 video, utilizing the full processing power of FFMPEG compiled to WebAssembly. This process occurs entirely within the browser.

The ability to convert animated SVGs into MP4 format further enhances the tool's utility. It ensures that animated content can be easily shared on platforms that do not support SVG animation natively. This is a noteworthy achievement by Simon Willison.