如何在 Flutter web wasm 中加载 SVG？

Question

我目前正在使用最新的 Flutter 版本 3.22.2 开发 Flutter Web 应用程序，并针对 WebAssembly (WASM)。由于 WASM 的限制，我需要在不依赖 HTML 或任何依赖 HTML 的包的情况下渲染 SVG 图像。

我尝试过使用 flutter_svg 包，但它似乎依赖于 HTML，这与 WASM 设置不兼容。这是我当前方法的简化版本：

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';

class SvgExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SVG Example'),
      ),
      body: Center(
        child: SvgPicture.asset(
          'assets/example.svg',
          semanticsLabel: 'Example SVG',
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: SvgExample(),
  ));
}

当我使用 --wasm 标志运行应用程序时，我遇到了与 HTML 依赖项相关的问题。

我需要帮助：

是否有任何 Flutter 包或方法允许在使用 WASM 运行的 Flutter Web 应用程序中渲染 SVG 图像而不依赖于 HTML？

如果没有可用的此类软件包，在此环境下实现 SVG 渲染的替代方法是什么？

任何指导或示例代码片段将不胜感激。谢谢！

Answer 1

我相信这个问题只存在于 3.22.2 中，因为我无法在 3.22.1 中重现它。因此，第一个可能的选择是降级 flutter 或等待下一个版本，因为 fix 已经在主渠道中了

如果这两个选项都不适合您，您可以使用解决方法。

flutter_svg

在底层使用 vector_graphics。 社区为

3.22.2

提供了临时解决方法，在这里

这是您在项目中使用此解决方法的方法，只需将此块添加到您的

pubspec.yaml

：

dependency_overrides:
  vector_graphics_compiler:
    git:
      url: https://github.com/nohli/vector_graphics
      path: packages/vector_graphics_compiler
      ref: js_interop

我自己测试过。编译错误消失了，我已经能够使用 3.22.2 编译我的示例项目了。