plotly / dash-cytoscape

Interactive network visualization in Python and Dash, powered by Cytoscape.js
https://dash.plot.ly/cytoscape
MIT License
595 stars 120 forks source link

Background-image blurry and degraded after exporting to svg #166

Open hovo1990 opened 2 years ago

hovo1990 commented 2 years ago

I have put inside nodes svg files as background-images,

Inside the web browser (Chrome) the quality is good, but after exporting the background image quality degrades significantly.

image

image

Using the following callback to generate Image from cytoscape:

@app.callback(
    Output("cytoscape", "generateImage"),
    [
        Input("as-svg-button", "n_clicks"),
        Input("as-png-button", "n_clicks"),
    ])
def get_image(get_svg_clicks,get_png_clicks):

    # detect which button was pressed
    changed_id = [p['prop_id'] for p in dash.callback_context.triggered][0]
    if changed_id == 'as-svg-button.n_clicks':
        ftype= "svg"
    elif changed_id == 'as-png-button.n_clicks':
        ftype= "png"

    # File type to output of 'svg, 'png', 'jpg', or 'jpeg' (alias of 'jpg')
    #ftype = tab #tab

    # 'store': Stores the image data in 'imageData' !only jpg/png are supported
    # 'download'`: Downloads the image as a file with all data handling
    # 'both'`: Stores image data and downloads image as file.
    #action = 'store'
    action = 'download'

    return {
        'type': ftype,
        'action': action,
        'filename': 'Output_Graph'
    }

Dash version: Dash 2.0.0 Dash Core Components 2.0.0 Dash HTML Components 2.0.0