如何在Plotly Dash中使用dash-svg引用本地SVG文件？

问题原因 #

你之前的写法错误地将SVG文件路径放在了Image组件的children参数中，但dash-svg的Image对应SVG原生的<image>标签，该标签是通过href属性指定资源路径的，children在这里不具备加载图像的作用，所以只显示了空白框。

正确实现方式 #

方式1：修正dash-svg组件的用法

将SVG文件路径传递给Image组件的href参数，同时确保Svg的viewBox属性与你的SVG文件实际尺寸匹配（否则会导致图像缩放异常）：

from dash import Dash, html
from dash_svg import Svg, Image

app = Dash(__name__)

app.layout = html.Nav(
    children=[
        html.H6('Page Title'),
        Svg(
            children=[
                # 用href指定SVG路径，而非children
                Image(href='assets/my_svg.svg', height="2rem", width="auto")
            ],
            viewBox='0 0 24 24'  # 替换为你的SVG实际宽高，比如原SVG是100x70就写0 0 100 70
        )
    ]
)

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

方式2：直接使用html.Img组件（更简洁）

如果不需要SVG容器的特殊功能（如滤镜、复杂缩放等），直接用Dash原生的html.Img组件更简单，Dash会自动处理assets文件夹的资源路径：

from dash import Dash, html

app = Dash(__name__)

app.layout = html.Nav(
    children=[
        html.H6('Page Title'),
        html.Img(
            src='assets/my_svg.svg',
            style={'height': '2rem', 'width': 'auto'}
        )
    ]
)

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

内容的提问来源于stack exchange，提问作者Gabe Rigall