I am currently experiencing an issue where my components created in Figma do not export as svg’s correctly. When I export svg and png versions, my svg exports are missing many elements from the original design and many elements become broken. When exporting that same group as a png, it exports perfectly.
Has anybody else come across the problem?
I have tried creating designs on my corporate account, as well as personal accounts and the issue occurs for all accounts. There are many errors in my console, but I can’t find a resolution.
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?
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.
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.
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.
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.
Solution: a temporary fix I found was to 
︎