Repository: flutter
Issue: [flutter_svg] Support `mask-type:alpha`
Labels: package,P3,p: flutter_svg

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

Original report by @hashirshoaeb on Mar 15, 2023

Desired Output: In mac preview and google chrome it is visible like this.
<img width="129" alt="Screenshot 2023-03-15 at 6 28 28 PM" src="https://user-images.githubusercontent.com/35165481/225322902-4f031f25-c2c9-4bb0-a4f8-7169d215c780.png">

package output:
![Screenshot 2023-03-15 at 6 29 11 PM](https://user-images.githubusercontent.com/35165481/225323122-efecd127-0f19-4d1a-9267-667a16b50e66.png)

svg file:

```
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="paint0_linear_2747_23934" x1="8.125" y1="5" x2="36.25" y2="26.25" gradientUnits="userSpaceOnUse">
<stop stop-color="#EEBF6D" stop-opacity="0.64"/>
<stop offset="1" stop-color="#EBB04A" stop-opacity="0.8"/>
</linearGradient>
</defs>
<circle cx="20" cy="20" r="20" fill="url(#paint0_linear_2747_23934)"/>
<mask id="mask0_2747_23934" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="12" y="12" width="20" height="16">
<path d="M30.3275 22.9176C30.3275 25.2189 28.4621 27.0843 26.1608 27.0843C25.415 27.0843 24.7141 26.8885 24.1083 26.5447C23.4667 26.1811 22.933 25.6538 22.5616 25.0166C22.1902 24.3794 21.9944 23.6552 21.9941 22.9176C21.9941 21.8476 22.3975 20.8718 23.06 20.1343C23.4503 19.6985 23.9283 19.3499 24.4627 19.1116C24.997 18.8732 25.5757 18.7503 26.1608 18.751C28.4621 18.751 30.3275 20.6164 30.3275 22.9176Z" fill="white" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M26.1641 15.001V18.751C25.579 18.7503 25.0003 18.8732 24.4659 19.1116C23.9316 19.3499 23.4536 19.6985 23.0632 20.1343C22.3757 20.8982 21.9959 21.8899 21.9974 22.9176C21.9976 23.6552 22.1934 24.3794 22.5648 25.0166C22.9362 25.6538 23.4699 26.1811 24.1116 26.5447C23.0024 26.8801 21.5299 27.0843 19.9141 27.0843C16.4624 27.0843 13.6641 26.1514 13.6641 25.001V15.001" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M26.1641 15.0003C26.1641 16.1507 23.3657 17.0837 19.9141 17.0837C16.4624 17.0837 13.6641 16.1507 13.6641 15.0003C13.6641 13.8499 16.4624 12.917 19.9141 12.917C23.3657 12.917 26.1641 13.8499 26.1641 15.0003Z" fill="white" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M13.6641 21.6668C13.6641 22.8172 16.4624 23.7502 19.9141 23.7502C20.667 23.7502 21.3891 23.706 22.0574 23.6243M13.6641 18.3335C13.6641 19.4839 16.4624 20.4168 19.9141 20.4168C21.0624 20.4168 22.1386 20.3135 23.0632 20.1335" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M27.8307 22.9176H26.1641V21.251" stroke="black" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
</mask>
<g mask="url(#mask0_2747_23934)">
<path d="M12 10H32V30H12V10Z" fill="white"/>
</g>

</svg>

```

---
Comment by @dnfield on Mar 15, 2023
This is a bug in the mask optimizer.

---
Comment by @dnfield on Mar 15, 2023
Hm. Maybe it is not a bug in the masking optimizer, but it is a bug in mask handling...

---
Comment by @dnfield on Mar 15, 2023
Yeah, the `mask-type` is not being processed correctly in this library.

---
Comment by @dnfield on Mar 15, 2023
This needs a bit of thinking about how to properly apply masks that I'm not going to have time for soon. I'm open to a PR to fix this, but you can also temporarily work around it by removing the last path in your mask (which doesn't contribute to drawing in this case).

---
Comment by @dnfield on Mar 15, 2023
```svg
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="paint0_linear_2747_23934" x1="8.125" y1="5" x2="36.25" y2="26.25" gradientUnits="userSpaceOnUse">
<stop stop-color="#EEBF6D" stop-opacity="0.64"/>
<stop offset="1" stop-color="#EBB04A" stop-opacity="0.8"/>
</linearGradient>
</defs>
<circle cx="20" cy="20" r="20" fill="url(#paint0_linear_2747_23934)"/>
<mask id="mask0_2747_23934" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="12" y="12" width="20" height="16">
<path d="M30.3275 22.9176C30.3275 25.2189 28.4621 27.0843 26.1608 27.0843C25.415 27.0843 24.7141 26.8885 24.1083 26.5447C23.4667 26.1811 22.933 25.6538 22.5616 25.0166C22.1902 24.3794 21.9944 23.6552 21.9941 22.9176C21.9941 21.8476 22.3975 20.8718 23.06 20.1343C23.4503 19.6985 23.9283 19.3499 24.4627 19.1116C24.997 18.8732 25.5757 18.7503 26.1608 18.751C28.4621 18.751 30.3275 20.6164 30.3275 22.9176Z" fill="white" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M26.1641 15.001V18.751C25.579 18.7503 25.0003 18.8732 24.4659 19.1116C23.9316 19.3499 23.4536 19.6985 23.0632 20.1343C22.3757 20.8982 21.9959 21.8899 21.9974 22.9176C21.9976 23.6552 22.1934 24.3794 22.5648 25.0166C22.9362 25.6538 23.4699 26.1811 24.1116 26.5447C23.0024 26.8801 21.5299 27.0843 19.9141 27.0843C16.4624 27.0843 13.6641 26.1514 13.6641 25.001V15.001" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M26.1641 15.0003C26.1641 16.1507 23.3657 17.0837 19.9141 17.0837C16.4624 17.0837 13.6641 16.1507 13.6641 15.0003C13.6641 13.8499 16.4624 12.917 19.9141 12.917C23.3657 12.917 26.1641 13.8499 26.1641 15.0003Z" fill="white" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M13.6641 21.6668C13.6641 22.8172 16.4624 23.7502 19.9141 23.7502C20.667 23.7502 21.3891 23.706 22.0574 23.6243M13.6641 18.3335C13.6641 19.4839 16.4624 20.4168 19.9141 20.4168C21.0624 20.4168 22.1386 20.3135 23.0632 20.1335" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
</mask>
<g mask="url(#mask0_2747_23934)">
<path d="M12 10H32V30H12V10Z" fill="white"/>
</g>

</svg>
```