Dash: Plot SVG object

[germayneng]

Hi,

I am generating a decision tree based plot (dtreeviz). However, the limitation is that it can only export as a SVG object. If so, how can i display this svg object in dash?

Regards
Germayne

[Marc-Andre-Rivet]

@germayneng If you can export as an SVG and you do not need to further customize/style the output, you can use:

html.Img(src=<your svg path>)

and host the static svg file in Dash like so (https://community.plot.ly/t/serve-locally-option-with-additional-scripts-and-style-sheets/6974, https://community.plot.ly/t/adding-local-image/4896/3)

@app.server.route('/static/<path:path>')
def static_file(path):
    static_folder = os.path.join(os.getcwd(), 'static')
    return send_from_directory(static_folder, path)

Hope this helps! Be sure to also look up the forum if you have additional questions.

[alexcjohnson]

You can also put the whole svg in the src attribute with a data uri
http://depth-first.com/articles/2011/10/19/display-inline-svg-using-the-img-tag/ (base64 encoded)
https://css-tricks.com/lodge/svg/09-svg-data-uris/ (regular utf8 text)

[germayneng]

Thank you! it works well now. Here is what i did for future references
The resulting svg variable is then passed into html.Img( )

import base64
encoded = base64.b64encode(open(svg_file,'rb').read()) 
svg = 'data:image/svg+xml;base64,{}'.format(encoded.decode()) 

[zyxue]

Thank you! it works well now. Here is what i did for future references
The resulting svg variable is then passed into html.Img( )

import base64
encoded = base64.b64encode(open(svg_file,'rb').read()) 
svg = 'data:image/svg+xml;base64,{}'.format(encoded.decode()) 

Any update for embedding svg, please? I find the disadvantage using html.Img is that the the links inside the svg become unclickable...