Flutter web: unhandled element filter on svg

Question

I Updated my project to flutter 2.0.2 without null safety. Now I am trying to lunch on web (chrome). When app is launch in splash page I loaded a svg image. The svg is loaded on chrome but in terminal I see this error :unhandled element filter; Picture key: AssetBundlePictureKey(bundle: PlatformAssetBundle#0a707(), name: "assets/svgs/splash.svg", colorFilter: null) This is flutter slpash svg code:

Stack(children: [
        Container(
            width: double.infinity,
            height: double.infinity,
            child: SvgPicture.asset(
              R.assetsSvgsSplash,
              fit: BoxFit.cover,
            ),),

I am using flutter_svg: ^0.19.3

this doctor:

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.0.2, on Linux, locale en_US.UTF-8)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.0-rc1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.0)
[✓] VS Code (version 1.54.2)
[✓] Connected device (1 available)

• No issues found!

Solution 1

After reading what @Felix says, I opened the .svg in Illustrator, and exported it as SVG with the following settings

and the problem disappeared, the resulting SVG even lost in size (kbs)

Solution 2

Seems that the SVG library does not support certain (any?) filters.

I got rid of the message by removing the <filter ...>...</filter> tags and attributes like filter="url(#filter-3)" from the SVG imgage file (simply with a text editor).

My image didn't have any filters I actually needed so the image was still correct and the message was gone. If your image has certain filters it needs to be displayed correctly then this is maybe not the right solution :)

Comments

[Pawara Siriwardhane]

Please add some context to your answer. It will help other users to understand your approach easily.