Repository: flutter
Issue: [flutter_svg] Web svg gradient is not rendered in mobile bowsers
Labels: package,p: flutter_svg

_Imported from https://github.com/dnfield/flutter_svg/issues/811_

Original report by @Turbozanik on Nov 24, 2022

**Issue**: Svg gradient not rendered on mobile browsers

**Lib version**: flutter_svg: 1.1.5

**SVG example**:

```
<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
	<radialGradient id="paint0_radial_73_656" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(50.5729 50.5729) rotate(90) scale(45.5729)">
		<stop offset="0.640625" stop-color="#4DC9DB" stop-opacity="0.8"/>
		<stop offset="1" stop-color="#4DC9DB" stop-opacity="0"/>
	</radialGradient>
	<radialGradient id="paint1_radial_73_656" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(50.3333 51.3333) rotate(90) scale(33.3333)">
		<stop offset="0.276042" stop-color="#05B179" stop-opacity="0.8"/>
		<stop offset="0.838542" stop-color="#05B179" stop-opacity="0"/>
	</radialGradient>
<g clip-path="url(#clip0_73_656)">
<g opacity="0.3" filter="url(#filter0_f_73_656)">
<path d="M50.5729 96.1458C75.7421 96.1458 96.1458 75.7421 96.1458 50.5729C96.1458 25.4037 75.7421 5 50.5729 5C25.4037 5 5 25.4037 5 50.5729C5 75.7421 25.4037 96.1458 50.5729 96.1458Z" fill="url(#paint0_radial_73_656)"/>
</g>
<g opacity="0.3" filter="url(#filter1_f_73_656)">
<path d="M50.3333 84.6667C68.7428 84.6667 83.6667 69.7428 83.6667 51.3333C83.6667 32.9238 68.7428 18 50.3333 18C31.9238 18 17 32.9238 17 51.3333C17 69.7428 31.9238 84.6667 50.3333 84.6667Z" fill="url(#paint1_radial_73_656)"/>
</g>
<path d="M66.4586 39.1579C66.0068 39.1579 65.5633 39.2666 65.1617 39.4842C64.76 39.6934 64.417 40.003 64.1659 40.3795C63.9149 40.756 63.7476 41.1828 63.6974 41.6346C63.6472 42.0864 63.7057 42.5383 63.8731 42.965L58.0159 48.8222C57.3633 48.5628 56.6353 48.5628 55.9827 48.8222L51.799 44.6385C51.9663 44.2201 52.0249 43.7599 51.9747 43.3081C51.9245 42.8562 51.7655 42.4295 51.5061 42.053C51.2467 41.6764 50.9121 41.3752 50.5104 41.1577C50.1088 40.9485 49.6653 40.8313 49.2135 40.8313C48.7617 40.8313 48.3182 40.9401 47.9165 41.1577C47.5149 41.3668 47.1719 41.6764 46.9208 42.053C46.6614 42.4295 46.5025 42.8562 46.4523 43.3081C46.4021 43.7599 46.4606 44.2117 46.628 44.6385L39.658 51.6085C39.0639 51.3742 38.4029 51.3575 37.8004 51.5499C37.1896 51.7424 36.6708 52.144 36.3194 52.6795C35.968 53.215 35.8174 53.8509 35.8759 54.4868C35.9429 55.1228 36.2274 55.7168 36.6792 56.1687C37.131 56.6205 37.7251 56.905 38.361 56.972C38.997 57.0389 39.6329 56.8799 40.1684 56.5285C40.7039 56.1771 41.0972 55.6583 41.298 55.0475C41.4904 54.4366 41.4737 53.784 41.2394 53.1899L48.2094 46.2199C48.8621 46.4793 49.59 46.4793 50.2427 46.2199L54.4263 50.4036C54.259 50.822 54.2004 51.2822 54.2506 51.734C54.3008 52.1858 54.4598 52.6126 54.7192 52.9891C54.9786 53.3656 55.3133 53.6668 55.7149 53.8844C56.1165 54.0936 56.56 54.2107 57.0119 54.2107C57.4637 54.2107 57.9072 54.102 58.3088 53.8844C58.7104 53.6752 59.0535 53.3656 59.3045 52.9891C59.5639 52.6126 59.7229 52.1858 59.7731 51.734C59.8233 51.2822 59.7647 50.8303 59.5974 50.4036L65.4545 44.5464C65.8394 44.6971 66.241 44.764 66.651 44.7305C67.061 44.7054 67.4543 44.5883 67.8141 44.3875C68.1739 44.1866 68.4835 43.9189 68.7261 43.5842C68.9688 43.2495 69.1278 42.873 69.2031 42.4713C69.2784 42.0697 69.2617 41.6513 69.1612 41.2581C69.0608 40.8648 68.8684 40.4966 68.609 40.1787C68.3496 39.8607 68.0233 39.6097 67.6468 39.434C67.2786 39.2583 66.8686 39.1662 66.4586 39.1662V39.1579Z" fill="#4DC9DB"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M27.9566 70C27.9566 69.3787 28.4603 68.875 29.0816 68.875H71.7551C72.3764 68.875 72.8801 69.3787 72.8801 70C72.8801 70.6213 72.3764 71.125 71.7551 71.125H29.0816C28.4603 71.125 27.9566 70.6213 27.9566 70Z" fill="#4DC9DB"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M28.2449 27.875C28.8662 27.875 29.3699 28.3787 29.3699 29V70C29.3699 70.6213 28.8662 71.125 28.2449 71.125C27.6236 71.125 27.1199 70.6213 27.1199 70V29C27.1199 28.3787 27.6236 27.875 28.2449 27.875Z" fill="#4DC9DB"/>
</g>
<defs>
<filter id="filter0_f_73_656" x="1" y="1" width="99.1458" height="99.146" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_73_656"/>
</filter>
<filter id="filter1_f_73_656" x="16" y="17" width="68.6667" height="68.6665" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_73_656"/>
</filter>
<clipPath id="clip0_73_656">
<rect width="100" height="100" fill="white"/>
</clipPath>
</defs>
</svg>
```

**How I use it**:

```
 Visibility(
      visible: element.mAnswer.getIconPath().isNotEmpty,
      child: SvgPicture.asset(element.mAnswer.getHighlightedIconPath(), width: mIconSize),
  )
```

Results comparison:
**Mobile Web:**:
![photo1669311787](https://user-images.githubusercontent.com/7550948/203843090-6689e851-c3a7-44f0-8b17-a5937d637885.jpeg)
**Desctop Web**:
![desctop_web png](https://user-images.githubusercontent.com/7550948/203842961-ec6c9d0e-aae9-4bdd-90ee-c50baf10a6ce.jpg)

**Question:**
Maybe someone has an idea of how can I fix that?

**UPDATE #1**:

FYI: Also my images generate the following warning during precaching, but still works as it should. And precaching also works.

`unhandled element filter; Picture key: AssetBundlePictureKey(bundle: PlatformAssetBundle#0e6dd(), name: "assets/images/ic_healthcare_highlighted.svg", colorFilter: null, theme: SvgTheme(currentColor: Color(0xff000000), fontSize: 14, xHeight: 7))`

---
Comment by @dnfield on Jan 20, 2023
This is an upstream issue in Flutter - the HTML backend likely has not implemented something here that is impelemnted for the CanvasKit backend.