Flutter_svg: Add (some) support for blur effect

[sroddy]

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

[dnfield]

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 https://github.com/flutter/flutter/issues/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.

[dnfield]

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.

[liri2006]

Any news on this one? Would be great to have shadows support :)

[rohit901]

could you please do something about this, our app needs to use a colored svg but it is not being rendered.

[dnfield]

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.

[JSBmanD]

Any updates about this feature?

[dnfield]

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.

[szadrutsky]

Doesnt work for me either
In Chrome this works perfectly and rendered with the shadow.

nflx_graph.svg.zip

[mohammadne]

any update ?

[KenHoang16CDTH12]

I have same issues. I need solution.

[alectogeek]

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

[dnfield]

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.

[Brock-Wood]

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

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

[rupamking1]

I understood this issue is duplicate but please tell me when you make shadow feature in svg plugin.

[dnfield]

I'll provide an example when I'm back at my computer :)

[dnfield]

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.

[rupamking1]

Yes your Package fans are waiting for This Feature.

[rupamking1]

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.

[oguibueno]

Any news on that?

[gfb-47]

Any updates?

[gfb-47]

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.