Hi @Sarah6 are you able to share a copy of this file? This looks like it might be related to a bug with SVGs and masking in Figma.

Hi @Josh , thank you for your help! I cannot send a copy of the entire document which is experiencing the issue. Are you able to send me a direct message, or provide me with your email?

Otherwise, here is a created a copy of this image specifically in another document. You can access it here: https://www.figma.com/file/Nbt25GLc22WRLRTJcYdOSQ/SVG-Bug-Issue?node-id=0%3A1

I’m also having an SVG export error, and I can share my files. The Figma file can be viewed here, and the exports are in a public GitHub Gist here. The green unicorn is correctly exported to PNG, but not to SVG.

I am also getting buggy SVG export issues. Some (but not all) of my vector icons are exporting quite badly.

See screenshot - Figma on left, exported SVGs in Chrome on right.

Original Figma file is accessible here.

Would love to know how to fix this.

UPDATE: After some messing around, I discovered a workaround. By digging through the shapes in each icon and changing the stroke positions to “Center” instead of “Outside”, the exports work much more reliably. (Thankfully in my case, the stroke position did not make a huge impact on the appearance of the icons.)

I suspect this is due to the fact that SVGs do not officially support stroke positions other than “Center” (see here). Perhaps Figma is attempting some kind of algorithm to fake the stroke position, but it’s having issues on complex shapes.

So until a better solution is provided, I’ll have to make a mental note to keep all stroke positions as center if the object is destined for SVG format.

If you absolutely must have a stroke sitting on the inside or outside of an object, you may need to fake it by:

• For outer strokes - putting a duplicate copy of a shape (with no stroke) above the original one


• For inner strokes - use a duplicate copy of the shape as a mask for the original one

Just wanted to +1 this. Had a simple frame I was trying to export. Changed the frame stroke from inside to center and it worked as expected. One thing to note is that I only changed the stroke of the frame containing the image. The strokes within the frame were left as inside/outside and it still exported correctly.

Same here. Changing the stroke of the problematic SVG from “Inside” to “Center” fixed the issue. Thanks @Simon_East for following up on this.

Hi! I used a plugin for fix this problem.

I recommend try this extension, in my case i fixed the problem!

Yes @Simon_East this was super helpful, thank you so much for this nice explanation 🙂

Thank you, this is so helpful 😁

Hi @Josh , I’m having an issue with exporting masked shapes as well. A circle with an image inside is exporting as an SVG with the image slightly warped and trimmed.

File link?

I’m having lots of issue with exported svg. Not only is the stroke double in size, but masks are removed, gradients are gone and shadows don’t show. The funny thing is that the same file I export 4 months ago didn’t have any problems but when I re-export today, has created problems. Does anyone have this issue and have a resolution? thanks!

Oh my gosh! I thought it was just me. I used to be able to export to SVG with “clip content” checked and I sure thought it exported to the dimensions of the frame. But it’s now keeping the stuff that’s supposed to be clipped. I’ve spent the last two hours trying to find alternate ways to get the right dimensions but with no success 😭

Please report bugs to Figma support team via the bug report form. DON’T FORGET TO ATTACH 1. Screenshots, 2. Exported SVGs, 3. Original Figma file links, 4. Info on where and how you are viewing the SVGs so they can reproduce these issues. Each of these 4 items must be included so engineers can diagnose the problem.

Thanks! Will do.

I’ve just experienced the same issue as the others have described and have submitted a report.

I’ve experiencing same problem, while exporting as svg images are not export correctly

Figma team, please fix this!

🛠️ Solution: a temporary fix I found was to ⤵️︎

1. Outline the stroke


2. Go into edit mode


3. Delete any criss-cross lines by selecting them and hitting delete


4. (optional) Merge the two shapes back together and flatten

Exporting SVG should not require destructive edits to the vector shape. @anon21722796 where are you on this? Let’s maybe not take over a year to fix this time-consuming bug.

Same issue - I have a simple thumb tack, the pin section needs the stroke on the inside to get the point, nothing else works, but then the output in svg is a pin about 25% the length.

See attached, the background is figma, and the foreground is the svg preview tool on my machine showing the svg exported:

I just had same issue but it wasn’t related to the shapes but text areas. And it was a random issue, other file with the same components exported fine and other ones didn’t. I had to break the components and check all elements one by one. Pretty annoying…

I’m having same issue as well, exporting a file certain icons do not export at all while others from an original file are fine. It’s extremely frustrating, I have even tried to use different icons and none are able to transfer.

Hi there, I’m also having an issue while exporting SVGs to Android studio. The error I’m getting is with images, android studio can’t support the way figma deals with images using pattern. Wondering if there is a work around this?

Met unsupported element: pattern.

In my case this was because when copy pasting assets through figma a width turned to 0px. but still would look fine. and export would work fine for user without editing rights. But for me with editing rights, exporting the assets as an svg would look broken because of that 0px width “bug”… as soon as I put that manually back to 2px (which was what the original asset had) the asset not only looked fine but also exported fine again.