How to render a SVG image on a Dash application?!

Dash Python
1

Hey guys!

I’m trying to render an SVG image that is a long arrow… As I’m loading some png images with the base64 help, I tried to extend it to svg but it’s not loading the file in the application;

This is the code that I’m using to load the image:

import base64

image_filename = 'assets/static/green_arrow_long.svg'

encoded_image = base64.b64encode(open(image_filename, 'rb').read()).decode() 

app.layout = html.Div([
          html.Img(src='data:image/png;base64,{}'.format(encoded_image))
    ])

I did a lot of searches but I can’t find an answer to this problem… Could someone give me some direction about it?

Thank you very much in advance;

Best,
Leonardo

2

You could either use the path to the image in the src attribute of Img:

html.Img(src=image_filename)

Or use change the png to svg in the base64-encoded image:

html.Img(src="data:image/svg;base64,{}".format(encoded_image))
2 Likes
3

Hi bro, thank you for your try!!!

I didn’t realize the difference on these both options

'data:image/png;base64,{}'.format(encoded_image)
and
'data:image/svg;base64,{}'.format(encoded_image)

but I tried the other approach, doing a load of SVG file directly and it rendered a white image but seems like the problem was in my svg file…

I just tried an alternative SVG file as a test, and it worked well; The problem probably is on my svg file;

Thank you very much for your help @RenaudLN

Best,
Leonardo

2 Likes
4

You can also use this:

5

If anyone has the same problem but the mentioned solution didn’t work. See the link below, this fixed it for me.

https://github.com/plotly/dash/issues/537#issuecomment-454629246