如何在PyQt5的GUI应用中嵌入TensorBoard并正常显示SVG图表

问题原因 #

QWebEngineView默认配置未开启动态SVG渲染所需的相关权限，且TensorBoard的图表为JS动态生成的SVG资源，默认的跨域限制、本地存储禁用等配置会拦截资源加载，导致仅能渲染静态HTML、无法显示图表。

修复后的完整代码 #

import sys
from PyQt5.QtCore import QUrl
from PyQt5.QtWebEngineWidgets import QWebEngineView, QWebEngineSettings
from PyQt5.QtWidgets import QApplication

app = QApplication(sys.argv)
web = QWebEngineView()
# 配置Web引擎属性，适配动态SVG渲染需求
settings = web.settings()
settings.setAttribute(QWebEngineSettings.JavascriptEnabled, True)
settings.setAttribute(QWebEngineSettings.PluginsEnabled, True)
settings.setAttribute(QWebEngineSettings.LocalStorageEnabled, True)
settings.setAttribute(QWebEngineSettings.AllowRunningInsecureContent, True)
settings.setAttribute(QWebEngineSettings.SvgEnabled, True)
settings.setAttribute(QWebEngineSettings.WebGLEnabled, True)

web.load(QUrl("https://tensorboard.dev/experiment/EDZb7XgKSBKo6Gznh3i8hg/#scalars"))
web.show()
sys.exit(app.exec_())

补充说明 #

• 如果需要单独加载本地/远程的单个SVG文件，除了QWebEngineView外，也可以使用PyQt5原生的QSvgRenderer模块，结合QLabel或者QWidget绘制渲染，无需调用Web引擎，性能开销更低。
• 请确保你安装的PyQt5版本>=5.12，且单独安装了PyQtWebEngine依赖，低版本的Qt WebEngine对动态SVG的支持存在已知bug，会出现渲染异常。

内容的提问来源于stack exchange，提问作者Nadjib RAIS