How do you use SVG's on Flutter Web? - flutter

Question

The flutter_web docos say to that dart:svg is ported, but how do you use that with the flutter asset / widget system?

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

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.

Answer 5

#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));