Insert an SVG depiction of Mol into Image widget

[enricogandini]

I wish to insert the SVG depiction of a Mol object into an ipywidgets Image widget.
I tried the following:

import ipywidgets as widgets
from rdkit import Chem
from rdkit.Chem.Draw import IPythonConsole


IPythonConsole.ipython_useSVG = True


mol = Chem.MolFromSmiles("c1ccoc1")

svg = mol._repr_svg_().encode()
image = widgets.Image(value=svg, format="svg")
image

The resulting image is not displayed correctly.

Everything would work perfectly if I inserted a PNG into the Image widget:

png = mol._repr_png_()
image = widgets.Image(value=png)
image

The Mol object alone is displayed correctly as an SVG by Jupyter Lab (after IPythonConsole.ipython_useSVG = True). But I need the SVG to be in an Image widget, since I am trying to make a composite widget object.

Any suggestions are highly appreciated!

Configuration report

• Python: 3.7.9
• RDKit: 2020.09.3
• ipywidgets: 7.6.3
• Environment installed with Conda

[greglandrum]

I don't believe Jupyter has anyway to translate SVG into PNG (or JPG, or any of the formats that Image support).

Is there any particular reason you don't just get the molecule image as an Image directly using IPythonConsole._toPNG(mol)?

[enricogandini]

Thanks for your reply!

Maybe I did not explain myself well: I am able to insert the PNG depiction of a molecule into an Image. I did that with Mol._repr_png_ method, or as you suggest, I could use IPythonConsole._toPNG (is it preferable?).

I am not able to insert an SVG depiction of a molecule into an Image.
The SVG is correctly displayed by Jupyter Lab with command display(mol) if IPythonConsole.ipython_useSVG = True. But I do not know how to pass that same SVG to an Image.

My final purpose is to insert the Image with other widgets into an AppLayout widget container.

[greglandrum]

In order to do that you would need some way to convert an SVG (which is a vector format) into a raster format like PNG (or JPG, or any of the formats Image supports).
The documentation for Image is here: https://ipython.readthedocs.io/en/stable/api/generated/IPython.display.html#IPython.display.Image
I would guess that it's probably possible to do this, but that's not related to the RDKit.

Maybe there's some way to make ipywidgets work with an IPython.display.SVG object?

[enricogandini]

Thanks for the useful suggestion!

I tried to insert a IPython.display.SVG object into an Image widget, but it does not work.
I will look into this, and maybe I will ask the ipywidgets community.
If I find any solution, I will post it here!

[enricogandini]

After some trial and error, I came up with a workaround:

from rdkit.Chem import Draw


file_image = "my_molecule.svg"
Draw.MolToFile(mol, file_image)
image = widgets.Image.from_file(file_image)

Basically, I write an SVG file with MolToFile, and then create an Image widget with from_file method.
This is good enough for me, since I can preliminarily write all SVG image files, and read them into Image widgets when needed.

It would still be interesting to create an Image widget from directly from an SVG object, without any need to write the SVG file. But this is probably a question for the ipywidgets community.

[ptosco]

@enricogandini @greglandrum After a bit of investigation it turns out that the problem is actually that format should be svg+xml, not svg; once you fix that, everything works as expected:

import ipywidgets as widgets
from rdkit import Chem
from rdkit.Chem.Draw import rdMolDraw2D, IPythonConsole
from IPython.display import SVG

mol = Chem.MolFromSmiles("c1ccoc1")

d2d = Draw.MolDraw2DSVG(300, 300)
d2d.DrawMolecule(mol)
d2d.FinishDrawing()
text = d2d.GetDrawingText()

image = widgets.Image(value=text.encode("utf-8"), format='svg+xml', width=150, height=150)

image

[enricogandini]

Excellent!
Yes, the solution is to set format="svg+xml" when creating an Image.