1

I am trying to export an object as an SVG (or even as a path in Figma would be fine). The problem is that every time I try to export something that has a clipping mask in it as an SVG, it looks nothing like the actual object in Illustrator.

So far, I tried the solution explained on this post : How to export with a clipping mask in illustrator

However, I don't see an “Expand appearance” command under the “Edit” menu in Illustrator.

Improve this question
2
  • 1
    Typically one need to "bake in" the clip. That is remove the mask entirely and ensure the object look how you want without the mask. Hard to help without seeing the artwork. That 2017 answer you've linked to was essentially a guess. I'm not sure how valid it was. You can't really "expand" clipping masks. The answer would expand anything inside the clipping mask, but not the mask itself.
    – Scott
    May 30, 2022 at 15:29
  • Most likely the problem isnt the clipping mask. Problem is elewhere, like not having a closed curve etc. Also in what software do you validate your svg.
    – joojaa
    May 30, 2022 at 16:34

1 Answer 1

Reset to default
1

Here is an example SVG with a clipping path made in Illustrator. It's basically some straight lines which have been grouped, and a circle applied as a clipping path. There is no problem here. The SVG works fine in browsers. There is nothing you need to do except export as SVG. There is no need to expand anything. The SVG format supports clipping paths.

If your issue is that the SVG isn't displaying properly in Figma, then the problem is with Figma. After trying the above SVG in Figma, it doesn't appear to support this feature properly, or it may be a bug. It doesn't even import the clipping path vector. This may be a result of Figma's masking being quirky - it's upside-down.

So, with that in mind, here's workaround for dealing with clipping paths for use in Figma.

  1. In Illustrator*, release the clipping path using Object > Clipping Mask > Release.

  2. Select the clipping path and change the fill to black, no stroke.

  3. Export the SVG

  4. Import the SVG into Figma

  5. In Figma, in the Layers panel, move the artwork group above the vector to be used as the mask, i.e. Artwork group on top, and vector to be used as the mask directly underneath (this is the quirk I mentioned above)

  6. Select the group and the vector to be used for masking, and click Object > Use as mask

*Note: For those who don't have access to Illustrator, this fix will also work using other software such as Inkscape (which is free and Open Source). In Inkscape the equivalent operation is Object > Clip > Release. To export for Figma, use File > Save As and choose "Plain SVG" or "Optimised SVG" as the file type.

Improve this answer
2
  • 1
    Thanks so much, it was exactly what i was looking for
    – Mathi
    Jun 2, 2022 at 13:39
  • @Mathi - that's great. Glad it worked for you.
    – Billy Kerr
    Jun 2, 2022 at 14:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.