Render SVGs Directly in Markdown

A new tool from Simon Willison lets you render SVG code blocks directly within Markdown documents, with a toggle to view the underlying code. This is particularly useful for technical documentation, presentations, and any project that uses both text and diagrams.

The markdown-svg-renderer takes either raw Markdown input or a URL (from CORS-enabled sources like GitHub Gists) and generates an HTML output where SVG code blocks are rendered as interactive images. Users can click to view the source code at any time.

Practical Applications

• Technical documentation: Embed diagrams, charts, and visualizations directly in API docs or tutorials
• Presentations: Create more engaging slides with live-updating SVGs
• Interactive reports: Combine narrative analysis with dynamic visuals
• Educational materials: Allow students to explore code examples while reading explanations

Example Use Case

Demonstrating the tool’s capabilities, Simon uses it to display LLM evaluation logs (specifically for Claude Opus 4.8) where users can toggle between seeing the rendered chart and the underlying SVG code.

You can try it yourself at https://tools.simonwillison.net/markdown-svg-renderer