Flutter Web WASM环境下无HTML依赖渲染SVG的方案咨询

我正在用Flutter 3.22.2开发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 flag运行应用时，遇到了和HTML依赖相关的问题。

我需要的帮助：

1. 是否存在可在Flutter Web WASM环境中无HTML依赖渲染SVG的包或方法？
2. 若没有此类包，有哪些替代方案可实现该环境下的SVG渲染？

希望能得到相关指导或代码示例，感谢！

1. 无HTML依赖的SVG渲染包/方法 #

目前最可靠的方案是使用vector_graphics包——这是Flutter官方维护的矢量图形渲染库，完全基于Flutter的Canvas API实现，不依赖任何HTML相关代码，天生支持WASM环境。

使用vector_graphics的步骤与示例 #

1. 添加依赖到pubspec.yaml：

dependencies:
  vector_graphics: ^1.1.9+1
  vector_graphics_codec: ^1.1.9+1

2. 离线编译SVG为.vec格式（避免运行时解析开销）：
   执行命令行工具完成转换：

flutter pub run vector_graphics_compiler input.svg output.vec

3. 在代码中渲染.vec文件：

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

class SvgWasmExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('WASM SVG Example')),
      body: Center(
        child: VectorGraphic(
          loader: AssetBytesLoader('assets/example.vec'),
          semanticsLabel: 'Example SVG',
          width: 200,
          height: 200,
        ),
      ),
    );
  }
}

void main() {
  runApp(const MaterialApp(home: SvgWasmExample()));
}

2. 替代方案 #

如果暂时不想引入新包，可选择以下两种方式：

方案一：将SVG转换为Flutter自定义绘制代码 #

使用svg_to_flutter这类工具，把SVG文件直接转换为CustomPainter代码，通过Flutter原生Canvas完成绘制，完全无外部依赖，适配WASM环境。

示例代码结构：

class ExampleSvgPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // 转换后的Canvas绘制指令
    final path = Path()
      ..moveTo(10, 10)
      ..lineTo(100, 10)
      ..lineTo(55, 80)
      ..close();
    canvas.drawPath(path, Paint()..color = Colors.blue);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

// 组件中使用
CustomPaint(
  size: const Size(200, 200),
  painter: ExampleSvgPainter(),
)

方案二：预渲染SVG为位图 #

将SVG提前转换为PNG/WebP等位图格式，用Flutter原生的Image.asset加载。这种方式最简单，但缩放时会失真，适合简单或无需缩放的场景。

示例代码：

Image.asset(
  'assets/example.png',
  width: 200,
  height: 200,
  semanticsLabel: 'Example SVG',
)

内容的提问来源于stack exchange，提问作者Yawar Othman