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!

Noneffective

Answer 1

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 :)

Outworn

For reference if you have multiple svgs you can use this regex to search and delete them: <filter((.|\n)*)</filter> – Cutlip

@Cutlip and Felix thank you both. I tried for SVGOMG but even with that tool, it did not work. I came across this and solved it. – Baeza

Answer 2

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)

Malpighi

Answer 3

In addition to this error, SVG files with tags also caused problems during render. I got great results after cleaned my SVG files with one of the SVG cleaner apps.

I have stated two of them below. I hope it works as well for you.

https://github.com/RazrFalcon/svgcleaner

https://www.softpedia.com/get/Multimedia/Graphic/Graphic-Others/SVG-Cleaner.shtml

Burny

Answer 4

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

it works

Bellinzona

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