Problem importing SVGs with Mask

Ask the community
1

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.

2

So basically in simple words:

This works in all browsers and apps (like Adobe Illustrator), but doesn’t work in Figma:

<def>
	<mask></mask>
</def>
<g>
	...
</g>

This works in all browsers and apps and also in Figma:

<mask></mask>
<g>
	...
</g>

So I’m trying to understand if this is done intentionally or it is just a bug?

1 Like
3

I have the same problem… +1