search

googlecolab / colabtools

Python libraries for Google Colaboratory
Apache License 2.0
2.17k stars 705 forks source link

Unable to Embed SVG Images #2092

Open chrisyeh96 opened 3 years ago

chrisyeh96 commented 3 years ago

Describe the current behavior

Google Colab seems to provide no ability to embed SVG images into the notebook.

Describe the expected behavior

Google Colab should provide the ability to embed SVG images into the notebook. This is a functionality that Jupyter Lab (partially) supports. For example, all of the following ways of embedding an SVG image into a Jupyter notebook work fine in Jupyter Lab. However, none of them work on Google Colab.

<!--Vanilla, URL-encoded, and Base64-encoded SVG in <img> tag-->

<img src='data:image/svg+xml;ascii,<svg xmlns="http://www.w3.org/2000/svg" height="40" width="40"><circle cx="20" cy="20" r="20" fill="red" /></svg>'>

<img src="data:image/svg+xml;ascii,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2240%22%20width%3D%2240%22%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%2220%22%20fill%3D%22red%22%20%2F%3E%3C%2Fsvg%3E">

<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iNDAiIHdpZHRoPSI0MCI+PGNpcmNsZSBjeD0iMjAiIGN5PSIyMCIgcj0iMjAiIGZpbGw9InJlZCIgLz48L3N2Zz4=">

<!--URL-encoded and Base64-encoded Markdown Image Shorthand-->

![test.svg](data:image/svg+xml;ascii,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2240%22%20width%3D%2240%22%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%2220%22%20fill%3D%22red%22%20%2F%3E%3C%2Fsvg%3E)

![test.svg](data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iNDAiIHdpZHRoPSI0MCI+PGNpcmNsZSBjeD0iMjAiIGN5PSIyMCIgcj0iMjAiIGZpbGw9InJlZCIgLz48L3N2Zz4=)

<!--URL-encoded and Base64-encoded CSS Background Image-->

<div style="width: 40px; height: 40px; background-image: url('data:image/svg+xml;ascii,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2240%22%20width%3D%2240%22%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%2220%22%20fill%3D%22red%22%20%2F%3E%3C%2Fsvg%3E')"></div>

<div style="width: 40px; height: 40px; background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iNDAiIHdpZHRoPSI0MCI+PGNpcmNsZSBjeD0iMjAiIGN5PSIyMCIgcj0iMjAiIGZpbGw9InJlZCIgLz48L3N2Zz4=')"></div>

What web browser you are using

Tested on both Microsoft Edge 91.0.864.54 (64-bit) and Firefox 89.0.1 (64-bit)

Additional context

Minimum working example: https://gist.github.com/chrisyeh96/7c720647a03121f231442708d84d2178

blois commented 3 years ago

Thanks for the report. Currently we're blocked on this as our security team has not signed off on an HTML sanitizer which supports sanitizing SVG so the SVG content is being stripped during sanitization.

Tracking in b/191871128.

eeropic commented 2 years ago

@chrisyeh96

Inline SVG works inside code blocks if preceded with %%html So is the magic command then doing sanitization? But only not in Markdown?

Colab example (with plain inline SVG added as well)

eeropic commented 2 years ago

This is the best workaround for myself at the moment,