Flutter_svg: SVG asset loading/rendering performance in PageView widget

[Raqbit]

Hi,

I'm relatively new to Flutter & could not really find how PageView handles rendering/loading it's child widgets, but when I use SvgPicture as a child of a PageView, I keep getting "lag spikes" from (I guess) the loading/rendering of the SVG.

Currently I'm creating the SvgPicture widgets in initState() of a stateful widget and then using the PageView builder to add the to the PageView (This is a simplified example):

class CardsPageView extends StatefulWidget {
  CardsPageView({Key key}) : super(key: key);

  final String title;

  @override
  CardsPageViewState createState() {
    return new CardsPageViewState();
  }
}

class CardsPageViewState extends State<CardsPageView> {
  List<Widget> cards = [];

  @override
  void initState() {
    super.initState();
    for (var i = 0; i < 10; i++) {
      cards.add(SomeCard(index: i));
    }
  }

  @override
  Widget build(BuildContext context) {
    return PageView.builder(
      controller: controller,
      itemCount: cards.length,
      itemBuilder: (context, position) {
        return cards[position];
      },
    );
  }
}

class SomeCard extends StatefulWidget {
  final int index;

  SomeCard({
    Key key,
    this.index,
  }) : super(key: key);

  @override
  SomeCardState createState() {
    return new SomeCardState();
  }
}

class SomeCardState extends State<SomeCard> {
  Widget cardArt;

  @override
  void initState() {
    super.initState();

    cardArt = SvgPicture.asset("assets/${widget.index}.svg");
  }

  @override
  Widget build(BuildContext context) {
    return Card(
      child: cardArt,
    );
  }
}

When using "Flutter Performance" in Android Studio I get this FPS graph while scrolling through the cards:

Do you know what is causing these rendering delays & what would be the best way to fix them?

[dnfield]

Could you provide a full reproduction of this issue (perhaps a github repo with a working project)?

I'd hazzard a guess that you probably don't want to create the SvgPicture in initState, but just do it in your build method. It should be caching the resulting picture, but I'm not sure if there's something else going on here preventing it from doing that.

[Raqbit]

I uploaded the full source of the testing app here: https://github.com/Raqbit/stacked.

It's worth noting that the spikes are worse at the beginning, as expected for a first load. Not sure how I would go about smoothing that part out.

When you have loaded all SVGs in the PageView and scroll back though, there still are some spikes when scrolling.

[anasiqbal]

@dnfield Any update on this?

[dnfield]

If you want to preload the SVG, you should use precachePicture. If that's the bottleneck, do it early on and you should be fine.

After that it depends on the complexity of the picture. Some SVGs aren't very performant. If you're drawing something with lots of paths and groups and group opacities and clips, it will be slow to redraw. You could try a repaint boundary, or you could rasterize it.

[sroddy]

@dnfield what is the suggested way to rasterize it?

[dnfield]

Hmm I thought I said this here but guess I didn't. I would start by adding a Repaint boundary over the bigger SVGs and see if that takes care of it

[enricobenedos]

I’m also having some performance issue with load from assets. I’m using a rotation animation that during the execution continuously switch between two svg files. Probably the files are a little bit complex (76kb) but I need to find a method to improve the performance. Probably it is better to preload the two svg files and then use them. Anyway there is performance issue related to rendering that is not fast

[OPJP]

Repaint boundary

Reduce The Image resolution and this should significantly improve performance

[MisterJimson]

I am also seeing performance issues when a parent of my Svg widget is setting state. I've tried wrapping in a RepaintBoundary and did not see significant changes.

I've tried optimizing the SVG with a few tools as well.

[MisterJimson]

Another thing thats interesting.

If I set the SvgPicture.asset height or width to a much smaller amount than I want the performance issues pretty much go away.

In my use case the width and height I want to render at is around 375w 163h. If I set the height to 20 the performance is fine, but its obviously too small for my UI.

[apoleo88]

I am having the same performance issue with SvgPicture.asset
I am using it on a scrollable ListView, 40 SVGs are displayed at a time (size 64x64).
The page appears excessively overloaded.

[MisterJimson]

I was able to resolve my issue my asking a designer to optimize the SVG in Illustrator. I no longer have issues except that I need to get every SVG specifically optimized.

[andreidiaconu]

@MisterJimson Can you recommend an app / command / process for optimizing SVGs that worked for you? Thanks

[MisterJimson]

Unfortunately all of the open sources tools and apps I found didn’t do a good enough job. Our designer modified the SVG before exporting it from their design tool.

[AleksandarSavic95]

Here is a useful post about precaching assets:
https://kangabru.xyz/2020/05/29/zero-to-hero-2.html#preload-svgs
basically, do this for every asset

Future.wait([
  precachePicture(
    ExactAssetPicture(
        SvgPicture.svgStringDecoder, 'assets/my_icon.svg',),
    null,
  ),
  // ...
]);

[apoleo88]

I want to show them in a scrollable list. If I have to precache them all, I will encounter latency in the start and severe memory problems, with the risk of crashing the app.

[dnfield]

@apoleo88 avoid using SVGs that have embedded images, and see if you can use something like SVG cleaner to shrink down your size. But yes, at some point you do have to choose between frame latency and how much you can pre-warm.