SVG markdown tags do not display in notebook

[henryiii]

When you add inline svg in a markdown cell, such as this:

<svg width="300" height="100" xmlns="http://www.w3.org/2000/svg">
<line x1="10" y1="10" x2="290" y2="10" style="stroke:#000">
</line>
<ellipse cx="150" cy="50" rx="20" ry="20" style="stroke:#000;fill:none;"></ellipse>
</svg>

It does not render in the notebook, but does render in print preview. See https://stackoverflow.com/a/44321122/2402816. Also, this post even claims it is possible, but it does not seem to be. Same issue present in Jupyter Lab (even though the renderer is quite different).

This seemed like an excellent way to add simple figures to a notebook without creating extra files or ugly user-visible SVG("...") commands in input cells.

[takluyver]

What you can do in Markdown cells is limited for security reasons; I would guess that stripping out SVG is part of that. The idea is that a notebook shouldn't be able to run anything as soon as you open it, or disguise parts of its content to trick you into running something you didn't mean to.

[henryiii]

However, you can easily embed an external image to do just that, even from the web. I think raw SVG is probably no larger a security risk than that. (Could be wrong though)

[takluyver]

You can embed a bitmap image, I'd expect it blocks embedding a remote SVG in the same way.

I don't know much about this area, but my understanding is that SVG graphics are handled by the browser as part of the page, and they can have CSS and Javascript, so they're more of a risk than a PNG or JPEG.

[henryiii]

Easy enough to check, putting this in a markdown cell:

![](https://upload.wikimedia.org/wikipedia/commons/8/80/Atom_Diagram.svg)

Renders the SVG.

[henryiii]

Could this be related to this: https://github.com/google/caja/issues/1797 ? Guessing from here. The Amp project seems to have solved this by moving to DOMPurify as far as I can gather from https://github.com/ampproject/amphtml/issues/15123.

[takluyver]

Can you inspect the HTML it produces? I wonder if SVG in an <img> tag is safer than inline SVG in the document.

[henryiii]

Just a pretty standard <img src="https://upload.wikimedia.org/wikipedia/commons/8/80/Atom_Diagram.svg" alt="Image">.

I believe the problem is that Google's caja doesn't try to sanitize svg, but just removes it. Google's own AmpProject switched to a different sanitizer due primarily to that shortcoming.

[amine-aboufirass]

What if we want to build an SVG programmatically from scratch without having to jump into an SVG creation tool and then include the graphic using markdown? I tried the %%svg magic which seems to work but then there is no way to hide the input code in jupyter. I looked into use of tags to hide the input and only leave the svg as a graphic but this doesn't seem to work.... Any help would be most welcome. Thanks.

[amine-aboufirass]

How is it that embedding an external SVG is fine but raw SVG from the local machine poses a security risk? That doesn't make sense to me at all...