如何在Python Web应用中实现用户导出.SVG格式图表？

针对Plotly/Dash的解决方案 #

如果你用Plotly构建交互图表并基于Dash开发Web应用，直接利用Plotly的内置方法就能实现SVG导出，无需额外依赖：

import dash
from dash import dcc, html, Input, Output
import plotly.express as px

app = dash.Dash(__name__)

# 示例图表
df = px.data.iris()
fig = px.scatter(df, x="sepal_width", y="sepal_length")

app.layout = html.Div([
    dcc.Graph(id='iris-graph', figure=fig),
    html.Button('导出SVG', id='export-btn', n_clicks=0),
    dcc.Download(id='download-svg')
])

@app.callback(
    Output('download-svg', 'data'),
    Input('export-btn', 'n_clicks'),
    prevent_initial_call=True
)
def trigger_svg_export(n_clicks):
    # 将Plotly图表转为SVG格式的二进制数据
    svg_content = fig.to_image(format='svg')
    return dict(content=svg_content, filename='iris_scatter.svg')

if __name__ == '__main__':
    app.run_server(debug=True)

如果你的Web应用是纯前端基于Plotly.js实现的，也可以直接从DOM中提取SVG并触发下载：

// 假设图表容器的ID为"plot-container"
const plotSvg = document.querySelector('#plot-container svg').outerHTML;
const blob = new Blob([plotSvg], { type: 'image/svg+xml' });
const downloadLink = document.createElement('a');

downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'chart_export.svg';
downloadLink.click();
URL.revokeObjectURL(downloadLink.href);

针对Matplotlib的解决方案 #

如果用Matplotlib生成图表，可在后端直接生成SVG字节流，通过Web框架（如Flask）提供下载接口：

from flask import Flask, make_response
import matplotlib.pyplot as plt
import io

app = Flask(__name__)

@app.route('/download-svg')
def export_matplotlib_svg():
    # 生成示例图表
    fig, ax = plt.subplots()
    ax.plot([1, 3, 5], [2, 7, 4], label='示例曲线')
    ax.legend()
    
    # 将图表写入SVG字节流
    svg_buffer = io.BytesIO()
    fig.savefig(svg_buffer, format='svg', bbox_inches='tight')
    svg_buffer.seek(0)
    
    # 构建下载响应
    response = make_response(svg_buffer.getvalue())
    response.headers['Content-Type'] = 'image/svg+xml'
    response.headers['Content-Disposition'] = 'attachment; filename=matplotlib_plot.svg'
    return response

if __name__ == '__main__':
    app.run(debug=True)

通用注意事项 #

• 不同可视化库的SVG导出方法略有差异：比如Bokeh可使用export_svgs()函数，Altair可通过chart.save()指定格式为SVG。
• 若需保留Web端的交互状态（如缩放、选中的数据点），建议优先通过前端提取SVG，后端导出通常为静态版本。

内容的提问来源于stack exchange，提问作者Guilherme Reis