Hi guys!
So I encountered problem with adding SVG illustrations to my Figma designs that are using gradient mask.
Here is a simple test SVG, circle with gradient mask applied to it. Works well in browsers and other apps (e.g. AI), but doesn’t render well in Figma, as mask gets lost.
<svg width="140" height="140" viewBox="0 0 140 140" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="a" y1="70" x2="140" y2="70" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#fff"/>
<stop offset="1" stop-color="#fff" stop-opacity="0"/>
</linearGradient>
<mask id="b" x="0" y="0" width="140" height="140" maskUnits="userSpaceOnUse">
<circle cx="70" cy="70" r="70" fill="url(#a)"/>
</mask>
</defs>
<g mask="url(#b)">
<circle cx="70" cy="70" r="70" fill="#394eff"/>
</g>
</svg>
However if I manually just move MASK outside DEFS, like this, all works in Figma as well:
<svg width="140" height="140" viewBox="0 0 140 140" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="a" y1="70" x2="140" y2="70" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#fff"/>
<stop offset="1" stop-color="#fff" stop-opacity="0"/>
</linearGradient>
</defs>
<mask id="b" x="0" y="0" width="140" height="140" maskUnits="userSpaceOnUse">
<circle cx="70" cy="70" r="70" fill="url(#a)"/>
</mask>
<g mask="url(#b)">
<circle cx="70" cy="70" r="70" fill="#394eff"/>
</g>
</svg>
Is that a glitch, that Figma doesn’t recognize MASK inside DEFS, because that is normal syntax for a SVG and most of the apps export SVG this way including Adobe Illustrator? And that creates a problem to easily import SVGs with mask created elsewhere into Figma.