你如何在 Flutter Web 上使用 SVG？

Question

flutter_web 文档说 dart:svg 已移植，但是您如何将其与 flutter 资产/小部件系统一起使用？

Answer 1

老实说，我发现的最佳解决方案是通过网络加载网络图像。将资产存储在 CDN 上的某处，从 Web 版本的 CDN 中获取它，然后在 iOS/Android 上从本地的资产中检索它。

我CrossPlatformSvg使用这个库创建了一个小部件：https://pub.dev/packages/flutter_svg，类似于：

class CrossPlatformSvg {
  static Widget asset(
    String assetPath, {
    double width,
    double height,
    BoxFit fit = BoxFit.contain,
    Color color,
    alignment = Alignment.center,
    String semanticsLabel,
  }) {
    // `kIsWeb` is a special Flutter variable that just exists
    // Returns true if we're on web, false for mobile
    if (kIsWeb) {
      return Image.network(
        assetPath,
        width: width,
        height: height,
        fit: fit,
        color: color,
        alignment: alignment,
      );
    } else {
      return SvgPicture.network(
        assetPath,
        width: width,
        height: height,
        fit: fit,
        color: color,
        alignment: alignment,
        placeholderBuilder: (_) => Container(
          width: 30,
          height: 30,
          padding: EdgeInsets.all(30),
          child: CircularIndicator(),
        ),
      );
    }
  }
}

Answer 2

@aterenshkov 的方法对我有用（请参阅杰克答案下的评论）。以下是要实施的详细信息...

iOS / 安卓

child: SvgPicture.asset('assets/yourimage.svg')

网络

// remove assets folder reference
child: SvgPicture.asset('yourimage.svg')

将这 2 个结合在一起...

import 'package:flutter/foundation.dart'; // provides kIsWeb property
...
child: kIsWeb ? SvgPicture.asset('yourimage.svg') : SvgPicture.asset('assets/yourimage.svg')

Answer 3

我的 Flutter Web 应用程序将在桌面 Web 浏览器中渲染 SVG，但不能使用flutter_svg在移动 Web 浏览器中渲染。我发现有必要使用 canvaskit 支持进行构建，以便 SVG 在移动设备上呈现：

flutter build web --web-renderer canvaskit

然而，文档指出 canvaskit 增加了大约 2MB 的下载大小，这对我来说是一个大问题。遗憾的是，但我将使用光栅图像，直到这个问题得到解决。

Answer 4

flutter_svg版本 1.0.0 自 2021 年 12 月 2 日起发布，包括 Web 支持。因此，不再会阻止在 Flutter 项目中使用 svg 图像。