Repository: flutter
Issue: [flutter_svg] SVG asset loading/rendering performance in PageView widget
Labels: package,p: flutter_svg

_Imported from https://github.com/dnfield/flutter_svg/issues/111_

Original report by @raqbit on Feb 3, 2019

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):

```dart
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:

![image](https://user-images.githubusercontent.com/11144180/52175661-588a6f80-27a7-11e9-8622-a3a008dffe9d.png)

Do you know what is causing these rendering delays & what would be the best way to fix them?


---
Comment by @dnfield on Feb 4, 2019
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.

---
Comment by @raqbit on Feb 9, 2019
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.

---
Comment by @anasiqbal on Apr 22, 2019
@dnfield Any update on this?

---
Comment by @dnfield on Apr 22, 2019
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.

---
Comment by @sroddy on Apr 26, 2019
@dnfield what is the suggested way to rasterize it?

---
Comment by @dnfield on Apr 26, 2019
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

---
Comment by @enricobenedos on Nov 1, 2019
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

---
Comment by @OPJP on Feb 7, 2020
> Repaint boundary

Reduce The Image resolution and this should significantly improve performance

---
Comment by @MisterJimson on May 13, 2020
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.

---
Comment by @MisterJimson on May 13, 2020
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.

---
Comment by @apoleo88 on Jun 10, 2020
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. 

---
Comment by @MisterJimson on Jun 11, 2020
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.

---
Comment by @andreidiaconu on Jul 22, 2020
@MisterJimson Can you recommend an app / command / process for optimizing SVGs that worked for you? Thanks

---
Comment by @MisterJimson on Jul 22, 2020
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.

---
Comment by @AleksandarSavic95 on Oct 9, 2020
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,
  ),
  // ...
]);
```

---
Comment by @apoleo88 on Oct 9, 2020
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.

---
Comment by @dnfield on Oct 9, 2020
@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.

---
Comment by @maheshwaran-p on Oct 18, 2022


Hi we have created one tool to solve this issue.

Hope this tool will help for the better use of svg to the flutter developers .

try it out : https://svg2widget.web.app/

post related to the tool : https://www.linkedin.com/posts/maheshwaran-p_flutterdeveloper-flame-fluttercommunity-activity-6987966041922449408-cge_?utm_source=share&utm_medium=member_desktop

this tool will convert the svg into flutter code .



---
Comment by @apoleo88 on Oct 18, 2022
> Hi I have created one tool to solve this issue.
> 
> Hope this tool will help for the better use of svg to the flutter developers .
> 
> try it out : https://svg2widget.web.app/
> 
> post related to the tool : https://www.linkedin.com/posts/maheshwaran-p_flutterdeveloper-flame-fluttercommunity-activity-6987966041922449408-cge_?utm_source=share&utm_medium=member_desktop
> 
> this tool will convert the svg into flutter code .

I haven't tested it properly, but this seems to increase the size of the SVGs by at least 30%. I am not sure of the impact on the size of the finished bundle.


---
Comment by @maheshwaran-p on Oct 19, 2022
thanks for letting me know apoleo88 

size of the svg is adjustable .

Container(
          color: Colors.white,
          height: MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.width,
          child: Center(
            child: CustomPaint(
              painter: CandyPainter(40),
              size: Size.zero,
            ),
            // child: Container()
          ));

you can change the size of the svg by editing this line ---->[painter: CandyPainter( size of the svg )].

you can download the sample project .
https://github.com/maheshwaran-p/samplesvg/

---
Comment by @olegyablokov on Apr 12, 2023
Any updates?

---
Comment by @maheshwaran-p on Apr 13, 2023
update on what? @olegyablokov 

---
Comment by @moBai20 on May 31, 2023
any solution for this issue ?

---
Comment by @maheshwaran-p on May 31, 2023
> > Hi I have created one tool to solve this issue.
> > Hope this tool will help for the better use of svg to the flutter developers .
> > try it out : https://svg2widget.web.app/
> > post related to the tool : https://www.linkedin.com/posts/maheshwaran-p_flutterdeveloper-flame-fluttercommunity-activity-6987966041922449408-cge_?utm_source=share&utm_medium=member_desktop
> > this tool will convert the svg into flutter code .
> 
> I haven't tested it properly, but this seems to increase the size of the SVGs by at least 30%. I am not sure of the impact on the size of the finished bundle.

No by using this svg2flutter you can reduce the app bundle size . Instead svg file you are going to use flutter code . 

---
Comment by @moBai20 on May 31, 2023
> > > Hi I have created one tool to solve this issue.
> > > Hope this tool will help for the better use of svg to the flutter developers .
> > > try it out : https://svg2widget.web.app/
> > > post related to the tool : https://www.linkedin.com/posts/maheshwaran-p_flutterdeveloper-flame-fluttercommunity-activity-6987966041922449408-cge_?utm_source=share&utm_medium=member_desktop
> > > this tool will convert the svg into flutter code .
> > 
> > 
> > I haven't tested it properly, but this seems to increase the size of the SVGs by at least 30%. I am not sure of the impact on the size of the finished bundle.
> 
> No by using this svg2flutter you can reduce the app bundle size . Instead svg file you are going to use flutter code .

how use this tool with svg image 

---
Comment by @maheshwaran-p on May 31, 2023
> > > > Hi I have created one tool to solve this issue.
> > > > Hope this tool will help for the better use of svg to the flutter developers .
> > > > try it out : https://svg2widget.web.app/
> > > > post related to the tool : https://www.linkedin.com/posts/maheshwaran-p_flutterdeveloper-flame-fluttercommunity-activity-6987966041922449408-cge_?utm_source=share&utm_medium=member_desktop
> > > > this tool will convert the svg into flutter code .
> > > 
> > > 
> > > I haven't tested it properly, but this seems to increase the size of the SVGs by at least 30%. I am not sure of the impact on the size of the finished bundle.
> > 
> > 
> > No by using this svg2flutter you can reduce the app bundle size . Instead svg file you are going to use flutter code .
> 
> how use this tool with svg image

it's very simple . just select any svg , tool will convert the svg as flutter code .
I have provided how to use section in this tool . 
<img width="1440" alt="Screen Shot 2023-05-31 at 5 39 54 PM" src="https://github.com/dnfield/flutter_svg/assets/62535697/e89abd55-ae7e-4c9b-b017-853f9ee84946">


sample project code : https://github.com/maheshwaran-p/samplesvg/

---
Comment by @maheshwaran-p on May 31, 2023
please checkout my example/sample project( https://github.com/maheshwaran-p/samplesvg/ ) to know it's full flow .if any further query feel free to reach :)