Importing svgs with masks broken

When importing the svg document at the bottom of the page(taken from <mask> - SVG: Scalable Vector Graphics | MDN), the resulting figma document does not preserve the masked elements.
imported into figma
image
rendered in webpage
image

Is there something I can do to get around this? Maybe a different method of importing the masks?

<!-- Everything under a black pixel will be invisible -->
<path d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z" fill="black" />
1 Like

This is a known limitation. Use this plugin: https://figma.fun/W17tMs

thanks @Gleb I really appreciate the response

Still no solution for this? We use a lot of illustrations built in illustrator with transparency masked layers and this is becoming an issue, since all masked layers are unmasked when placed in Figma… pretty uncool, Figma…

5 Likes

HI there Figma! Any updates on this? Building a library of broken illustrations atm… :frowning:

Any updates? Supporting all SVGs from Illustrator is fundamentally important to us.

1 Like

Still no fix? Please give a workaround.

Hi, Figma! any updates ?

2 Likes

This really should be fixed asap!

1 Like

I soooo need a workaround for this it’s screwing up my workflow

hey there… you have no plan to solve this?

Figma, seriously. A vector based software that won’t export vectors properly.Please solve it ASAP. We spent day trying to find a work around.

Here is the plugin that fixes the issue: https://figma.fun/W17tMs

Hi, Gleb

This fix illustrator to Figma imports.
The problem here is Figma export engine/coding of SVGs, no matter how good imported SVGs are, once in Figma and exported from it, they break.
Tried to export the same SVGs from sketch of AI, no problem. It’s Figma way of exporting.
It also does the same if we use Zeplin, as we tried that to, once exported to Zeplin if the SVGs are downloaded from there, they’re broken. Same ones exported to Zeplin from sketch are fine.
It’s Figma export. Unfortunately.
The team works at one of the major creative agency and will have to use another tool for our handover to developers, once it comes to these illustrations.

We tried all sort of solutions, also following other threads here with fixes the community suggested; removed strokes, masks, flatten shapes, remove bleeding, making them pixel perfect (all of which water time), with no luck.

Ah, you are talking about export. This thread is about import. Feel free to send a bug report to Figma about export with specific examples and what exactly is broken because from your message I can only see that something is broken but not the slightest idea as to what. Here is the bug report form.

This didnt fix it for me :confused:
and im importing from AI to Figma

It still didn’t fixed second the plugin above is no more supported.

I have facing the problem of exporting my svg that has mask on it. When i import it in rive it brokes:
image

Curious, is this a Rive or a Figma issue? Can you send over the file and/or SVG?

1 Like

Here is the link of my project: