Flutter web: unhandled element filter on svg

user_9010134 0
Viewed 5973

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!
flutter-web flutter svg
3 Answers

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

enter image description here

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

user_41072450

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

enter image description here

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

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

it works

user_156602730
Related