Add direct support for SVG images

[julian-belina]

Is it possible to write a method which allows the direct integration of svg images into a report? Currently I am converting my svg graphs into png files in order to include them into my report. I am not sure how this is done properly using the DataPane HTML object.

[Mandeep Gill]

Hi there, have you tried dp.Media, that should work for any local images, audio, or video files - see https://docs.datapane.com/catalogs/blocks/media/

[Dr. Shahin Rostami]

Hey @julian-belina!

@mands is right about using dp.Media. There's a bug with it right now for SVG which we'll have fixed shortly!

In the meantime (if it's urgent for you), here is a workaround using dp.HTML:

import datapane as dp
import base64

data_uri = base64.b64encode(open("figure.svg", "rb").read()).decode("utf-8")
img_tag = '<img src="data:image/svg+xml;base64,{0}">'.format(data_uri)
dp.HTML(img_tag)

[julian-belina]

Hi there, have you tried dp.Media, that should work for any local images, audio, or video files - see https://docs.datapane.com/catalogs/blocks/media/

I have tried this and my report is not displayed anymore, if use the SVG image directly.

Hey @julian-belina!

@mands is right about using dp.Media. There's a bug with it right now for SVG which we'll have fixed shortly!

In the meantime (if it's urgent for you), here is a workaround using dp.HTML:

import datapane as dp
import base64

data_uri = base64.b64encode(open("figure.svg", "rb").read()).decode("utf-8")
img_tag = '<img src="data:image/svg+xml;base64,{0}">'.format(data_uri)
dp.HTML(img_tag)

Ah good to know. Thank you for your reply.

[Dr. Shahin Rostami]

I've just confirmed the fix in the current release of Datapane!

Thank you for raising this. Please let us know if there's anything else 👍