Doesn't handle the mask-type property on <mask>

[pranaygp]

🐛 Bug Report

If an svg has a <mask> with a mask-type attribute, the mask-type just gets dropped, resulting in an incorrect image.

To Reproduce

Steps to reproduce the behavior:

1. Go to the playground (https://www.smooth-code.com/open-source/svgr/playground/)
2. Plug in this SVG (the Windsor logo)

<svg width="60" height="60" viewBox="0 0 60 60" fill="none" 
    xmlns="http://www.w3.org/2000/svg">
    <mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="60" height="60">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M14.1584 1.88938C19.187 0.629792 24.4676 0 30 0C35.5324 0 40.813 0.629793 45.8416 1.88938V1.88938C51.8816 3.40231 56.5977 8.1184 58.1106 14.1584C59.3702 19.187 60 24.4676 60 30C60 35.5324 59.3702 40.813 58.1106 45.8416C56.5977 51.8816 51.8816 56.5977 45.8416 58.1106C40.813 59.3702 35.5324 60 30 60C24.4676 60 19.187 59.3702 14.1584 58.1106C8.1184 56.5977 3.40231 51.8816 1.88938 45.8416C0.629792 40.813 0 35.5324 0 30C0 24.4676 0.629793 19.187 1.88938 14.1584H1.88938C3.40231 8.1184 8.1184 3.40231 14.1584 1.88938Z" fill="#111111"/>
    </mask>
    <g mask="url(#mask0)">
        <rect width="60" height="60" rx="10" fill="url(#paint0_linear)"/>
        <g filter="url(#filter0_d)">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M30.3127 37.7975H25.0383L21.9056 27.9636H21.8417L18.7729 37.7975H13.4984L8.00024 21.9999H13.6583L16.4074 31.9923H16.5033L19.3483 21.9999H24.6227L27.5636 31.9923H27.6276L30.4086 21.9999H35.8429L30.3127 37.7975ZM35.0171 42.9999V40.1766H51.0003V42.9999H35.0171Z" fill="white"/>
        </g>
    </g>
    <defs>
        <filter id="filter0_d" x="-1.99976" y="13.9999" width="63" height="41" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
            <feOffset dy="2"/>
            <feGaussianBlur stdDeviation="5"/>
            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
        </filter>
        <linearGradient id="paint0_linear" x1="16.6191" y1="-30.5616" x2="-35.6231" y2="40.6845" gradientUnits="userSpaceOnUse">
            <stop stop-color="#E64CFF"/>
            <stop offset="1" stop-color="#FF860B"/>
        </linearGradient>
    </defs>
</svg>

3. Render the React Component, which look like this
   

Expected behavior

Workaround

I fixed this by manually adding in style={{ maskType: "alpha" }} to the generated react component. so my mask now looks like:

...
<mask
      ...
      style={{ maskType: "alpha" }}
    >
...

[gregberge]

Hello @pranaygp, mask-type is not actually a valid <mask /> tag property, the problem is the input SVG that is not valid.

[pranaygp]

Yeah that seems odd because Figma generates them and chrome seems to respect them (tested by manually adding mask-type="alpha" to a <mask> element in dev tools. However, it doesn't see like it should exist outside of CSS according to the spec 🤯

It does break Figma exports though. Probably best not to worry about it in svgr

[Domiii]

@gregberge mask-type for <mask> is "Candidate Recommendation": https://developer.mozilla.org/en-US/docs/Web/CSS/mask-type and supported by all major browsers for years. Would make sense to support it.

Is it an issue with svgr or where is the issue here?

[yisibl]

The only mask type that SVG1.1 supported was luminance masks; there wasn't even a mask-type property back then. The SVG2 spec removed descriptions of masking, and offloaded them to the CSS Masking Module Level 1 specification, which it adds the mask-type property and others as well.
https://gitlab.gnome.org/GNOME/librsvg/-/blob/a60dbd6b1924a362ed89dcce1afca15c86cf465d/devel-docs/adding-a-property.md

Spec: https://drafts.fxtf.org/css-masking/#the-mask-type

The mask-type is in compliance with the specification, please reopen this question.

[gregberge]

Hi @yisibl, thanks you for pointing it out. I don't know where it breaks but I am pretty sure it is not in SVGR itself. Could someone investigate it?

[yisibl]

resvg supports the mask-type attribute as of v0.32.0. linebender/resvg#582