'Flutter SVG not rendering properly

i have a design which is been converted to svg for me to display it in my flutter.. here is the design. enter image description here

but if i render it to my flutter project with this plugin is not displaying well. here is the result. enter image description here

here is my code

CarouselController buttonCarouselController = CarouselController();

int pageIndex = 0; final List imgList = [ 'assets/1b.svg', 'assets/2b.svg', 'assets/3b.svg', 'assets/4b.svg', 'assets/5b.svg', 'assets/6b.svg', 'assets/background.svg', ];

    return Scaffold(
      body: CarouselSlider(
        items: imgList.map((i) {
          return Stack(
            children: [
              Container(
                height: double.infinity,
                width: double.infinity,
                child: SvgPicture.asset(
                  i,
                  fit: BoxFit.fill,
                  allowDrawingOutsideViewBox: true,
                ),
              ),
              Padding(
                padding: EdgeInsets.all(30.0),
                child: Align(
                  alignment: Alignment.bottomRight,
                  child: Container(
                    child: GestureDetector(
                      onTap: () async {
                        await addPreference('onboard', true);
                        Navigator.pushNamed(context, '/userOption');
                      },
                      child: Text(
                        'Skip',
                        style: TextStyle(
                          color: pageIndex == 3 ? Colors.white : Colors.white,
                          fontSize: 20,
                        ),
                      ),
                    ),
                  ),
                ),
              )
            ],
          );
        }).toList(),
        carouselController: buttonCarouselController,
        options: CarouselOptions(
          autoPlay: true,
          onPageChanged: (i, r) {
            setState(() {
              pageIndex = i;
            });

            switch (pageIndex) {
              case 6:
                {
                  addPreference('onboard', true);
                  Navigator.pushNamed(context, '/userOption');
                }
                break;
            }
          },
          viewportFraction: 1.0,
          aspectRatio: 2.0,
          initialPage: 0,
          autoPlayInterval: Duration(seconds: 4),
          enlargeCenterPage: false,
          height: double.infinity,
        ),
      ),
    );
  }
}


Solution 1:[1]

If you run svgcleaner on this SVG it will work. Or if you manually reorder the defs to the top.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ali Punjabi