Today I learned how to inline SVGs in Jupyter notebooks in two simple steps:
- URL-encode the SVG markup. If you have an SVG file, open it and copy the contents of the file starting from the
<svg>tag all the way up to the closing</svg>and encode it so it's safe to use in a URL. You can use this URL encoder tool I created. - Add an image using Markdown syntax with
.
For any non-trivial SVG the URL-encoded string will look huge and nasty, as the image below shows:
But when I “execute” the cell to render the Markdown, the SVG displays neatly:
This was an interesting endeavour because I thought I could just paste the SVG markup in the notebook cell and it would be rendered; I was under the impression that you could write arbitrary HTML in those cells. I was either wrong or I did it in the wrong way!
Become the smartest Python 🐍 developer in the room 🚀
Every Monday, you'll get a Python deep dive that unpacks a topic with analogies, diagrams, and code examples so you can write clearer, faster, and more idiomatic code.
References
- “inlining SVG image in a markdown cell” Stack Overflow question, https://stackoverflow.com/a/44323948/2828287 [last accessed 24-11-2025];
