Repository: flutter
Issue: [flutter_svg] unknown issue with svg not loading.
Labels: package,P3,p: flutter_svg

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

Original report by @thecodepapaya on Dec 1, 2023

I have an SVG which opens fine on browser and mac preview, but when I add it to my code via below code, nothing renders on the screen. I've added the asset path to `pubspec.yaml`. There's nothing on the console either so it's almost impossible to figure out if something went wrong.

```
SvgPicture.asset(
  IconAsset.tabloid,
  height: 100,
  width: 100,
  fit: BoxFit.fitHeight,
  placeholderBuilder: (context) {
    return Container(
      color: Colors.black,
      height: 40,
      width: 40,
    );
  },
),
``` 

```
<svg width="865" height="1200" viewBox="0 0 865 1200" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g clip-path="url(#clip0_5439_1210)">
        <circle opacity="0.2" cx="150.5" cy="-52.5" r="288.5" stroke="#333333"
            style="stroke:#333333;stroke:color(display-p3 0.2000 0.2000 0.2000);stroke-opacity:1;" stroke-width="2"
            stroke-dasharray="8 8" />
        <circle opacity="0.6" cx="666.5" cy="1274.5" r="280" stroke="#333333"
            style="stroke:#333333;stroke:color(display-p3 0.2000 0.2000 0.2000);stroke-opacity:1;"
            stroke-dasharray="8 8" />
        <circle opacity="0.1" cx="150.5" cy="-52.5" r="244.5" fill="#333333"
            style="fill:#333333;fill:color(display-p3 0.2000 0.2000 0.2000);fill-opacity:1;" />
        <circle opacity="0.6" cx="666.5" cy="1274.5" r="244" stroke="#333333"
            style="stroke:#333333;stroke:color(display-p3 0.2000 0.2000 0.2000);stroke-opacity:1;" />
        <circle opacity="0.15" cx="666.5" cy="1274.5" r="202" fill="#333333" stroke="#333333"
            style="fill:#333333;fill:color(display-p3 0.2000 0.2000 0.2000);fill-opacity:1;stroke:#333333;stroke:color(display-p3 0.2000 0.2000 0.2000);stroke-opacity:1;" />
        <g opacity="0.15">
            <path
                d="M748.953 444.742L748.953 444.742C748.772 443.546 748.59 442.35 748.407 441.156C746.084 425.923 743.788 410.868 744.435 395.266C750.224 279.749 796.538 187.67 896.732 131.03L895.748 129.288L896.732 131.029C964.893 92.4953 1036.21 92.7105 1093.45 122.179C1150.7 151.653 1194.06 210.494 1206.07 289.588C1225.93 420.522 1150.23 558.53 1031.05 608.616L1031.83 610.46L1031.05 608.616C904.955 661.615 769.899 583.306 748.953 444.742ZM862.734 215.594L862.732 215.597L863.838 237.737L862.643 239.341C862.643 239.341 862.644 239.341 862.644 239.342C864.885 241.012 867.082 241.979 869.261 242.254C871.459 242.532 873.484 242.086 875.33 241.18C878.897 239.428 881.895 235.891 884.572 232.362C890.902 224.156 897.879 216.315 905.785 210.012C927.513 192.753 952.825 185.091 980.235 183.57C983.425 183.418 986.691 182.92 989.5 181.449C992.392 179.934 994.67 177.453 995.931 173.633C997.925 167.621 995.301 161.528 990.165 159.242L990.138 159.23L990.111 159.218C987.276 158.055 984.248 157.517 981.432 157.171C980.162 157.015 978.995 156.902 977.892 156.795C976.412 156.652 975.048 156.52 973.706 156.31L973.461 156.272L973.215 156.294C927.628 160.439 890.418 178.69 862.734 215.594Z"
                stroke="#333333" style="stroke:#333333;stroke:color(display-p3 0.2000 0.2000 0.2000);stroke-opacity:1;"
                stroke-width="4" />
            <path
                d="M834.915 630.924L834.918 630.917L834.922 630.911C836.988 627.122 839.056 623.9 841.528 622.109C842.716 621.249 843.958 620.751 845.329 620.664C846.708 620.577 848.375 620.897 850.417 621.926C854.348 623.925 855.709 626.582 855.864 629.474C856.03 632.579 854.811 636.198 852.945 639.875C835.58 673.273 810.456 694.618 776.024 696.999C762.532 696.846 752.863 694.208 743.329 690.543L743.317 690.539C740.241 689.378 737.814 687.729 736.407 685.678C735.058 683.711 734.51 681.18 735.52 677.831L735.521 677.829C736.514 674.519 738.177 672.403 740.173 671.34C742.152 670.287 744.803 670.086 748.173 671.3L748.175 671.301C768.794 678.71 785.763 677.368 800.021 669.62C814.182 661.926 825.404 648.054 834.915 630.924Z"
                stroke="#333333" style="stroke:#333333;stroke:color(display-p3 0.2000 0.2000 0.2000);stroke-opacity:1;"
                stroke-width="4" />
        </g>
    </g>
    <defs>
        <clipPath id="clip0_5439_1210">
            <rect width="865" height="1200" fill="white" style="fill:white;fill:white;fill-opacity:1;" />
        </clipPath>
    </defs>
</svg>
```

---
Comment by @usamakareem on Dec 1, 2023
I'm also facing same issue. Svg picture is opening fine in my system and browser but when i add it in my code and run it then it doesn't shows.
Using flutter_svg: ^2.0.9.
When i run project on profile mode. Then it shows error in console

error: "unhandled element <filter/>; Picture key: Svg loader"

```
SvgPicture.asset(
              Images.myPlan,
            ),
```

---
Comment by @ManishMK1438 on Dec 2, 2023
same issue with me. Even android studio is loading the svg perfectly in the IDE but nothing shows up in the app. 


![image](https://github.com/dnfield/flutter_svg/assets/62264707/0b329848-cd1e-41eb-833e-fda741f6e94d)


---
Comment by @zamirszn on Dec 6, 2023
im also having this issue

---
Comment by @BodenTide on Dec 8, 2023
im also having this issue

---
Comment by @zamirszn on Dec 8, 2023
I'm going to try this solution https://github.com/dnfield/flutter_svg/issues/980#issuecomment-1712234729 and see if it works

---
Comment by @BodenTide on Dec 9, 2023
> 我将尝试这个解决方案[#980（评论）](https://github.com/dnfield/flutter_svg/issues/980#issuecomment-1712234729)，看看它是否有效

Yes, this method can indeed display svg normally.