[flutter_svg] Add (some) support for blur effect #158592

Imported from dnfield/flutter_svg#53

Original report by @sroddy on Sep 4, 2018

Hi,
this is an SVG that we would like to be able to render using this library.
friends_emoji.svg.zip

The only thing that is not visibly rendered correctly are the shadows, which use a blur effect.

@dnfield can you please take a look on the file and tell me if you see anything that at the moment can't be rendered due to current Flutter rendering limitations?

We are considering to put some of our
efforts on this and fill a PR to add support.

Thank you a lot

Comment by @dnfield on Sep 10, 2018
FilterEffects are currently unimplemented at all. In theory they should all be possible, but I haven't put much thought into how they'd work out in Flutter.

This does seem related to #13489 - although this should be a bit simpler than that one (and may even point to some help on that one). It seems like it should be possible to just apply an ImageFilter to a Paint with some changes to the engine, and that may be more performant than building a whole new layer object for it.

Comment by @dnfield on Sep 18, 2018
So looking at this a little more, I don't think you'd even really need an ImageFilter - MaskFilter, which is already implemented, should be good enough.

Comment by @liri2006 on Sep 7, 2019
Any news on this one? Would be great to have shadows support :)

Comment by @rohit901 on Oct 6, 2019
could you please do something about this, our app needs to use a colored svg but it is not being rendered.

Comment by @dnfield on Oct 22, 2019
So I can stop downloading this each time I come back here:

<svg xmlns="http://www.w3.org/2000/svg" width="95" height="108" fill="none">
  <defs>
    <filter id="filter0_d" width="53.163" height="53.297" x="41.837" y="15.748" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
      <feOffset dx="4"/>
      <feGaussianBlur stdDeviation="4"/>
      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/>
      <feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
    </filter>
    <filter id="filter1_d" width="62.247" height="62.414" x=".223" y="0" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
      <feOffset dx="4"/>
      <feGaussianBlur stdDeviation="4"/>
      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/>
      <feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
    </filter>
    <filter id="filter2_d" width="68.854" height="69.045" x="8.803" y="38.955" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
      <feOffset dx="4"/>
      <feGaussianBlur stdDeviation="4"/>
      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/>
      <feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
    </filter>
    <linearGradient id="paint0_linear" x1="64.418" x2="64.418" y1="23.748" y2="61.045" gradientUnits="userSpaceOnUse">
      <stop stop-color="#FFE354"/>
      <stop offset="1" stop-color="#E9C93C"/>
    </linearGradient>
    <linearGradient id="paint1_linear" x1="64.412" x2="64.412" y1="46.474" y2="50.552" gradientUnits="userSpaceOnUse">
      <stop stop-color="#fff"/>
      <stop offset="1" stop-color="#CDCDCD"/>
    </linearGradient>
    <linearGradient id="paint2_linear" x1="27.346" x2="27.346" y1="8" y2="54.414" gradientUnits="userSpaceOnUse">
      <stop stop-color="#FFE354"/>
      <stop offset="1" stop-color="#E9C93C"/>
    </linearGradient>
    <linearGradient id="paint3_linear" x1="39.23" x2="39.23" y1="46.955" y2="100" gradientUnits="userSpaceOnUse">
      <stop stop-color="#FFE354"/>
      <stop offset="1" stop-color="#E9C93C"/>
    </linearGradient>
  </defs>
  <path fill="url(#paint0_linear)" d="M64.418 61.045C74.681 61.045 83 52.695 83 42.396c0-10.299-8.32-18.648-18.582-18.648s-18.581 8.349-18.581 18.648c0 10.3 8.32 18.649 18.581 18.649z" filter="url(#filter0_d)"/>
  <path fill="#000" d="M55.45 45.474a.894.894 0 0 0-.906.835.902.902 0 0 0 .08.442 10.796 10.796 0 0 0 3.974 4.59 10.741 10.741 0 0 0 11.629 0 10.797 10.797 0 0 0 3.974-4.59.902.902 0 0 0-.826-1.277H55.45z"/>
  <path fill="url(#paint1_linear)" fill-rule="evenodd" d="M73.527 48c.25-.4.476-.817.674-1.25a.9.9 0 0 0-.826-1.276H55.45a.891.891 0 0 0-.764.41.9.9 0 0 0-.062.867c.198.432.423.85.673 1.249h18.23z" clip-rule="evenodd"/>
  <path fill="#F24E53" d="M50.482 45.643a2.329 2.329 0 0 0 2.325-2.333 2.329 2.329 0 0 0-2.325-2.333 2.329 2.329 0 0 0-2.324 2.333 2.329 2.329 0 0 0 2.324 2.333zM78.355 45.643a2.329 2.329 0 0 0 2.324-2.333 2.329 2.329 0 0 0-2.324-2.333 2.329 2.329 0 0 0-2.325 2.333 2.329 2.329 0 0 0 2.325 2.333z" opacity=".5"/>
  <path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.325" d="M68.482 38.495c1.994-.828 4.129-.729 6.388 0M60.351 38.495c-1.99-.828-4.129-.729-6.388 0"/>
  <path fill="url(#paint2_linear)" d="M27.346 54.414c12.771 0 23.124-10.39 23.124-23.207S40.117 8 27.346 8C14.576 8 4.223 18.39 4.223 31.207s10.352 23.207 23.123 23.207z" filter="url(#filter1_d)"/>
  <path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.896" d="M15.892 23.731l5.566 3.987-6.652 3.394M38.8 23.731l-5.57 3.987 6.657 3.394"/>
  <path fill="#6793FD" d="M8.17 34.675c-.948.54-2.07.683-3.123.396a4.132 4.132 0 0 1-2.494-1.927 4.157 4.157 0 0 1-.416-3.131 4.143 4.143 0 0 1 1.904-2.516c2.329-1.351 6.301-.995 8.176-.73a.85.85 0 0 1 .728.786.856.856 0 0 1-.06.38c-.705 1.76-2.386 5.39-4.715 6.742z" opacity=".8"/>
  <path stroke="#C2EDFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.088" d="M7.885 27.92a7.725 7.725 0 0 0-3.088.828 3.002 3.002 0 0 0-1.363 1.6" opacity=".8"/>
  <path fill="#6793FD" d="M46.498 34.675a4.119 4.119 0 0 0 5.664-1.503 4.154 4.154 0 0 0-1.535-5.675c-2.329-1.351-6.301-.995-8.176-.73a.849.849 0 0 0-.729.786.858.858 0 0 0 .06.38c.706 1.76 2.387 5.39 4.716 6.742z" opacity=".8"/>
  <path stroke="#C2EDFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.088" d="M46.782 27.92a7.725 7.725 0 0 1 3.09.828c.63.351 1.115.92 1.362 1.6" opacity=".8"/>
  <path fill="#000" d="M16.185 36.284a1.112 1.112 0 0 0-.944.512 1.122 1.122 0 0 0-.076 1.075 13.438 13.438 0 0 0 4.946 5.711 13.369 13.369 0 0 0 14.47 0 13.438 13.438 0 0 0 4.947-5.711 1.123 1.123 0 0 0-.483-1.453 1.112 1.112 0 0 0-.537-.134H16.185z"/>
  <path fill="#F24E53" fill-rule="evenodd" d="M33.722 44.091a10.183 10.183 0 0 0-6.376-2.225c-2.414 0-4.632.833-6.375 2.225a13.365 13.365 0 0 0 12.751 0z" clip-rule="evenodd"/>
  <path fill="url(#paint3_linear)" d="M39.23 100c14.596 0 26.427-11.874 26.427-26.522 0-14.648-11.831-26.523-26.427-26.523-14.595 0-26.427 11.875-26.427 26.523S24.635 100 39.23 100z" filter="url(#filter2_d)"/>
  <path fill="#000" d="M25.021 71.256a1.484 1.484 0 0 0-1.465 1.265c-.036.233-.016.472.057.695 2.577 7.791 8.598 13.262 15.617 13.262 7.02 0 13.036-5.466 15.613-13.262a1.497 1.497 0 0 0-.733-1.795 1.484 1.484 0 0 0-.675-.165H25.02z"/>
  <path fill="#F24E53" fill-rule="evenodd" d="M48.602 82.857a13.578 13.578 0 0 0-9.372-3.74 13.578 13.578 0 0 0-9.372 3.74c2.684 2.287 5.906 3.62 9.372 3.62 3.467 0 6.689-1.332 9.372-3.62z" clip-rule="evenodd"/>
  <path fill="#F24E53" d="M19.236 78.45a3.31 3.31 0 0 0 3.303-3.315 3.31 3.31 0 0 0-3.303-3.315 3.31 3.31 0 0 0-3.304 3.315 3.31 3.31 0 0 0 3.304 3.316zM59.225 78.45a3.31 3.31 0 0 0 3.303-3.315 3.31 3.31 0 0 0-3.303-3.315 3.31 3.31 0 0 0-3.304 3.315 3.31 3.31 0 0 0 3.304 3.316z" opacity=".5"/>
  <path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.309" d="M33.45 66.018c-.587-2.395-2.396-4.144-4.543-4.144-2.147 0-3.96 1.749-4.542 4.144M54.095 66.018c-.586-2.395-2.395-4.144-4.542-4.144s-3.96 1.749-4.542 4.144"/>
</svg>

I believe everything that's needed for this is now available in the engine. Going to take another stab at it.

Comment by @JSBmanD on Dec 24, 2019
Any updates about this feature?

Comment by @dnfield on Dec 24, 2019
I started on this at one point and haven't had time to get back to it. It's not entirely simple, but should be doable.

I'd be happy to review a pr for it if someone else gets to it before me.

Comment by @szadrutsky on Feb 13, 2020
Doesnt work for me either
In Chrome this works perfectly and rendered with the shadow.

nflx_graph.svg.zip

Comment by @mohammadne on Mar 18, 2020
any update ?

Comment by @KenHoang16CDTH12 on May 7, 2020
I have same issues. I need solution.

Comment by @alectogeek on Aug 8, 2020
Any updates here?

Is there another way do draw shadow behind SVG picture in Flutter?
Should I convert it to the canvas path and draw the shadow or is there any easier way? Or maybe there is another library?
Thanks

Comment by @dnfield on Aug 8, 2020
I started working on support for this at one point but it has a lot of quirks to support. It should be possible but I have no estimate of when.

You could do a drawShadow on the canvas below decoded svg for sure though.

Comment by @Whale-Street on Sep 1, 2020

Is there another way do draw shadow behind SVG picture in Flutter?

Crappy workaround that I'm using: converting shadows to bitmap.

Comment by @rupamking1 on Dec 18, 2020
I understood this issue is duplicate but please tell me when you make shadow feature in svg plugin.

Comment by @dnfield on Dec 18, 2020
I'll provide an example when I'm back at my computer :)

Comment by @dnfield on Dec 18, 2020
Hmm. I'm realizing this might be something to add as a feature rather than expecting people to do it themselves as I work through it.

Part of the problem with supporting filter elements is that there's many many combinations that are valid and they become somewhat difficult to handle correctly outside of pretty simple cases. It's a solvable problem but not one I've had time to get to. And a couple people who really wanted this just went ahead and implemented drop shadows themselves.

I think it'd be reasonably easy to just add some kind of shadow property to the widget for people who want drop shadows though. The only thing is that may cause confusion if or when the package starts supporting filter elements that also do shadows.

Comment by @rupamking1 on Dec 18, 2020
Yes your Package fans are waiting for This Feature.

Comment by @rupamking1 on Dec 20, 2020
If I use multiple shadow components in Svg in different area, so how flutter shadow help us ?
Please use Android native is SVG plugin and joint it with your plugin and please solve Shadow problem.

Comment by @oguibueno on Mar 18, 2021
Any news on that?

Comment by @gfb-47 on Mar 24, 2021
Any updates?

Comment by @gfb-47 on Mar 25, 2021
I kinda solved this using Flutter Shape Maker, once my SVG wasn't working on this package, I just converted it into a flutter "draw" using this site. It worked just fine. Edit: Btw, I developed my SVG and got the code on Method Draw.

Comment by @Vasilisk7 on Aug 19, 2021
Same problem

Comment by @rupamking1 on Aug 19, 2021
I think flutter_svg author @dnfield never want to fix this problem.

Comment by @dnfield on Aug 19, 2021
It's not so much that I don't want to, as that it's a relatively complicated feature to properly support and I haven't had much time to get to it. I'm happy to review patches that support it.

Comment by @ArefMozafari on Sep 22, 2021
Hey there
Thank you so much for this fabulous package.
Here's what I get:
Unhandled element filter; Picture key: StringPicture(String#bcac4, colorFilter: null)
Since there are so many SVG assets in my project, I am not sure which of them should be replaced with the correct version of its own.
Using breakpoints did not help either.
My app displays this immediately upon opening in logs, but it doesn't break anything or cause a crash.

Comment by @ArefMozafari on Sep 26, 2021

Hey there
Thank you so much for this fabulous package.
Here's what I get:
Unhandled element filter; Picture key: StringPicture(String#bcac4, colorFilter: null)
Since there are so many SVG assets in my project, I am not sure which of them should be replaced with the correct version of its own.
Using breakpoints did not help either.
My app displays this immediately upon opening in logs, but it doesn't break anything or cause a crash.

Nothing so far?

Comment by @om-ha on Oct 17, 2021
Hey everyone, I summarized all the points regarding this issue into this StackOverflow answer here.

@dnfield Thanks for the awesome plugin!

1. I would like to ask you what your are thoughts regarding filter and effects/blur svg element support. If they are not going to be supported at all, then maybe mentioning this in Readme or something would be useful?
2. I noticed there's a use for the filter svg element in an example within this repo: https://github.com/dnfield/flutter_svg/blob/master/example/assets/simple/width_height_viewbox.svg?short_path=99658b9#L8

Comment by @dnfield on Oct 18, 2021
This is a feature I'd like to implement or see implemented. It's also unfortunately something I rarely have time to work on.

Some day, I will probably have time for this again. But someone else might implement it.

This is already listed as a TODO in the readme, but if there's some other way to make things clearer I don't mind.

Comment by @om-ha on Oct 19, 2021
Sound quite reasonable. Thanks for trying to work on this in the past and sharing some ideas on how to successfully implement this.

Regarding implementing SVG Filter Effects elements in flutter_svg package, here is everything I could gather related to implementing this feature. Now I am no expert in this, but I fumbled my way around it. I think it shows how complex this feature is:

References

• 1 What are SVG Filter Effects?
  • 1.1 [MSDN](https://developer.mozilla.org/en- US/docs/Web/SVG/Tutorial/Filter_effects)
  • 1.2 Wikipedia
• 2 Implementing this feature is not trivial to be done efficiently.
• 3 MaskFilter
  • 3.1 This could be used to implement this feature. As the package author suggested here and here.
  • 3.2 Official MaskFilter docs.

Points to consider

• 4 Be ready to navigate following topics:
  • 4.1 SVG specification
  • 4.2 Flutter framework and Flutter engine
  • 4.3 Maybe the underlying Skia engine.
• 5 Implementation ideas
  • 5.1 MaskFilter
    • 5.1.1 According to Wikipedia, SVG Filter Effects are defined as: A filter effect consists of a series of graphics operations that are applied to a given source vector graphic to produce a modified bitmapped result.
    • 5.1.2 MaskFilter as per flutter docs is defined as: A mask filter to apply to shapes as they are painted. A mask filter is a function that takes a bitmap of color pixels, and returns another bitmap of color pixels.
    • 5.1.3 Theoretically, MaskFilter can be used to convert an input bitmap representing the SVG obtained from flutter_svg, into another output bitmap by applying relevant SVG Filter Primitives depending on the specifications defined by parsed SVG. These primitives are finite so covering them should successfully implement filter element in this package.
  • 5.2 SVG Filter Effects element & CSS Filter property
    • 5.2.1 It's possible to embed SVG filter effects within CSS as demonstrated here and mentioned in this MSDN docs.
    • 5.2.2 It looks like someone in flutter engine got CSS filter effects to work for web-ui, I'm not sure what to make of this but here it is: source.
    • 5.2.3 It seems this flutter's web-ui source I just linked mentions something called Filter Effects Module Level 2 which talks about Filter Effects for SVG & CSS within the web, it might be worth checking this out for better understanding or implementation ideas. This looks like a recipe book on how to implement various Filter Effect primitive operators. There's also the older Filter Effects Module Level 1.

I think point 5.1 above is the most important one in implementing this feature.

I will try to update this comment with any new resources I come by. I could be wrong in some points so please point them out.

Comment by @ayoubm on Jan 24, 2022
Or use this widget to wrap your SvgPicture asset: https://pub.dev/packages/simple_shadow ! Works perfectly fine !

Comment by @Pedanfer on May 1, 2022
I solved this by downloading as PDF from Figma and trying multiple converters online, because I imagined they use different code for generating the SVG. Most did it with filter tags. Finally, I found one that didn´t use <filter>, and it works now. Users of the app can now rejoice with the crisp definition the SVG provides.

https://products.aspose.app/pdf/es/conversion/pdf-to-svg

Comment by @bartekpacia on Dec 7, 2022
@dnfield Is it possible to disable printing "unhandler element filter" to the console? I'd very much like to be able to do this.

I see it's coming from the vector_graphics package, from here.

Comment by @ugurberkecan on Dec 12, 2022
Make sure that your SVG file does not contain any defs elements. If it does, you can try removing them from the file and see if that fixes the issue.

Comment by @bartekpacia on Dec 12, 2022
@ugurberkecan Yeah, I know that, but I'm asking about shutting down the logs completely.

In general, I'm not a fan of packages calling print(), this makes it impossible to configure their log output to your own needs.

Comment by @ugurberkecan on Dec 12, 2022
@bartekpacia I tried to answer main question in this thread so I don't know your question.

Comment by @bartekpacia on Dec 12, 2022
Ah, okay. I didn't want to be mean, sorry :)

Comment by @SeriousMonk on Jan 15, 2023
I don't mean to sound ungreatful, because this package is great, but the issue was opened 5 years ago and there still is no support for blur. The drop shadows in my logo are being rendered horribly. Is there anything in the works regarding this?
Or should I stick to pngs.

Comment by @dnfield on Jan 17, 2023
Unfortunately, the way the spec is written this feature is very difficult to implement in any kind of performant way. I've been more focused on improving performance in general before trying to implement this. Flutter was also missing some features that made implementing this feature more difficult - those features are available now and it should be more possible to implement this.

That said, I'm still hesitant. The most common usage I've seen of this feature is to add a drop shadow. There are usually better ways to do that than what the implementation of this feature would be required to do.

Comment by @dnfield on Jan 17, 2023
To add a little more detail:

The way the spec is written, filters often require multiple render target switches to get right. It can be difficult (expensive) to determine whether an RT switch can be elided by the parser. RT switches are very expensive on mobile GPUs. Doing a lot of them will make your app very slow.

Comment by @fisforfaheem on Sep 16, 2023
please try

Comment by @SakshamKarnawat on Nov 9, 2023
I keep coming across issues related to SVGs in Flutter. Working with SVGs in Flutter is a huge pain. Hope this is fixed someday.

Comment by @escamoteur on Jul 18, 2024
could this be easier supported if the svgs get precomiled?

Comment by @fisforfaheem on Jul 22, 2024
Kindly add Full supporT FInally