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 ✦ AI generated
The ability to convert animated SVGs to MP4 makes it possible to share dynamic graphics on platforms that do not support SVG animation.
Simon Willison: 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!
provides context · 1
A new feature detects animations in SVGs and compiles them into MP4 videos using ffmpeg.wasm directly in the browser.
Simon Willison: 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.
extends · 1gives example · 2provides context · 1
Users can export SVGs as PNG or JPEG images via dedicated tabs, facilitating sharing on platforms without native SVG support.
Simon Willison: 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.
extends · 2gives example · 1provides context · 1supports · 1
The speaker asserts that the markdown-svg-renderer has evolved to become the ideal tool for handling Markdown with embedded SVGs.
Simon Willison: 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!
explains mechanism · 1provides context · 1
The tool supports two primary input methods: direct pasting of Markdown or pasting a URL to a hosted Markdown file or Gist.
Simon Willison: 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.
provides context · 1
The tool transforms raw SVG blocks in Markdown into fully rendered SVGs with a tabbed interface.
Simon Willison: As you can see, that SVG block in the Markdown has been transformed into a rendered SVG (in this case animated) plus several tabs.
extends · 1provides context · 4