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

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([

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;


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


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

1 Like

Hi bro, thank you for your try!!!

I didn’t realize the difference on these both options


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


1 Like

You can also use this: