SVG not rendering correctly in a container

Notebook ipynb
1

I created a docker image at

Examples showing the problem described below are in the notebook
notebooks/A2_Matrix_Layout_Displays.ipynb

The notebooks exercise code that returns IPython.display.SVG objects.
These render correctly when I run jupyter directly, but not when I run jupyter in the docker image.

When I display the svg file, e.g., using and HTML div in a markdown cell, the figures are correct,
so the issue seems to be the IPythib.display.SVG code?

Can anybody tell me what I need to do to get this working?

2

I wonder if Discourse mangled your posted link? It happened the other day when someone tried posting a complex link, too. Anyway, clicking your link above fails.

I got it to work using the following URL:

https://mybinder.org/v2/gl/ea42gh%2Felementary-linear-algebra/HEAD

For others looking at this, the associated repo is at ea42gh / Elementary Linear Algebra · GitLab

As for you issue. I’m not following 100% what you are trying to point at? It looks like the SVG at the top very top works? And the ones at the bottom, such as after section 1.3, aren’t rendering right in your notebook A2_Matrix_Layout_Displays.ipynb. Is that what you mean?

3

yes, that is what I mean. Note I am puzzled: the first SVG renders correctly, the next ones do not.
No idea what the differences are.

Thank you for correcting the link!!!

4

Hi @ea42gh

If you look in the developer tools you can see that the HoloViews logo is a data url. I.e. embedded in the html.

If you look in the developer tools you can see that the svg below is linked to. It’s looking at https://hub-binder.mybinder.ovh/user/ea42gh-elementary-linear-algebra-02zsgzmf/notebooks/work/figs/f12.svg. But cannot find the image there.

Maybe its a Jupyter thing because it’s not serving the image? Maybe its a binder thing due to the reverse proxy. Maybe it’s because you are using “…” in your path?

A workaround could be to convert the svg to a data url. For example Panel seems to do this. So you could probably use panel.pane.SVG to get it working.

image
image5120Ă—1600 1.15 MB

2 Likes
5

Hi @MarcSkovMadsen
Oh, sorry the notebook is fixed to actually render the image!!!
It is

h

that does not render correctly. h is the file contents wrapped in IPython.core.display.SVG(file_contents)
This normally works fine, but does not work in the docker image!

If I try to use panel, e.g.,

import re
svg_version_re = re.compile('^<\?xml version=[^>]*>' )

with open("../work/figs/f12sym.svg", "r") as f:
    svg = svg_version_re.sub('', f.read() )
pn.pane.SVG(svg)

the result is still messed up. Panel may be using IPython.core.display.SVG internally?

The only workaround I know so far is to display an HTML img