你如何在 Flutter Web 上使用 SVG？

Question

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

Answer 1

Honestly the best solution I've found is to load the image over a network for the web. Store the asset on a CDN somewhere, get it from the CDN on the web version, and retrieve it from your assets locally on iOS/Android.

I've created a CrossPlatformSvg widget using this library: https://pub.dev/packages/flutter_svg , something like:

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's approach worked for me (see comments under Jack's answer). Here are the details to implement...

iOS / Android

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

Web

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

Combine these 2 together...

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

Answer 3

My Flutter web app would render SVGs in a desktop web browser but not a mobile web browser using flutter_svg . I found it necessary to build with canvaskit support in order for SVGs to render on mobile:

flutter build web --web-renderer canvaskit

However, the docs state that canvaskit adds about 2MB in download size, which was a dealbreaker for me. Sad to say, but I will be using raster images until this is resolved.

Answer 4

@RumbleFish has nicely but using ternary operation at many can make the code messy.

My approach to this is:

• Create an Extension Function on String to replace assets/ from the path.

 extension ForWeb on String { String forWeb({required bool web}) => web ? this.replaceFirst('assets/','') : this; }

• Now in code:

SvgPicture.asset("assets/images/logo.png".forWeb(web: kIsWeb));

Answer 5

flutter_svg version 1.0.0 is out since Dec 2, 2021 including web support. So there is no longer a blocker to use svg images inside a Flutter project.