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!
Improve your Python 🐍 fluency and algorithm knowledge 🎯
Get ready for 12 intense days of problem-solving. The “Algorithm Mastery Bootcamp” starts December 1st and it will feature 24 programming challenges, live analysis sessions, a supportive community of like-minded problem-solvers, and more! Join now and become the Python expert others can rely on.
References
- “inlining SVG image in a markdown cell” Stack Overflow question, https://stackoverflow.com/a/44323948/2828287 [last accessed 24-11-2025];
