sixteenth August 2026
I began constructing my markdown-svg-renderer software in Might, however I’ve since added sufficient options to it that it is price speaking about right here once more.
It is advanced into my supreme software for sharing Markdown transcripts that embrace SVG paperwork. Given my proclivity for drawing pelicans driving bicycles this can be a downside that I wanted to resolve!
The software could be very easy. 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 doc.
The URL choice provides you with a bookmarkable web page, for instance https://instruments.simonwillison.internet/markdown-svg-renderer#url=httpspercent3Apercent2Fpercent2Fgist.github.compercent2Fsimonwpercent2F6f9e48293be5c916652d29f0dc0b0657 – which bakes within the URL to this Gist.
Should you go to the Gist you will see uncooked SVG:
Within the rendered software that appears like this as a substitute:
As you may see, that SVG block within the Markdown has been reworked right into a rendered SVG (on this case animated) plus a number of tabs.
The tabs are the actually enjoyable bit. The PNG and JPEG tabs render that SVG to these picture codecs within the browser and allows you to copy or obtain them – helpful for sharing on platforms that do not assist SVG straight.
The MP4 tab is new in the present day – it examines the SVG to see if it accommodates any animations, makes an attempt to guess how lengthy the looped video must be, then renders an entire bunch of frames of the animation and hundreds 30+MB of ffmpeg.wasm so it could actually compile these frames into an MP4 video utilizing the complete energy of FFMPEG compiled to WebAssembly and working within the browser.
With the ability to flip an animated SVG right into a MP4 once more makes it straightforward to share on platforms that may’t assist SVG animation natively. It is a neat trick!
