CODEWITHSUNDEEP
githubsvgjupyter-notebook
Chris_77
Chris_77

Reputation: 173

How to display an SVG image in a Jupyter Notebook on github

I would like to share a link to a Jupyter notebook where I demonstrate certain calculations and display their output in SVG files (ideally, using only standard libraries). Using a plotting library like matplotlib is not practical in this case, because the images don't have the structure of a graph (I tried and found it most practical to write a small plotting library for the type of output that I need to display).

My preferred platform for displaying the Notebook would be github, because I want to use the Notebook as a demo for my calculation engine. I can display an SVG file in a local Notebook using:

from IPython.core.display import SVG
SVG(filename='test.svg')

However, if I upload the Notebook to github, the image is not rendered and the output looks like this instead:

Out[1]: SVG Image

My current workaround is to display the HTML-rendered Notebook on my private website. However, it would be nicer to be able to display the Notebook with the rendered image directly on github.

Upvotes: 7

Views: 6977

Answers (1)

Karol Żak
Karol Żak

Reputation: 2406

You can achieve what you're looking for with my small package called ipyplot

import ipyplot

ipyplot.plot_images(
    ['Freesample.svg'], # images should be passed in as an array
    img_width=250,
    force_b64=True # this is important to be able to render the image correctly on GitHub
)

force_b64 flag will ensure that the image is converted to base64 string so that it will render correctly on GitHub. The only limitation is that if you have too many images in a single notebook - GitHub renderer will crash...

OUTPUT:
enter image description here

Upvotes: 5

Related Questions