Figma Support Forum

SVG Export Issue

Hi Figma Community!

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.

1 Like

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
10 Likes

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.

2 Likes

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 :slight_smile:

Thank you, this is so helpful :grin:

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!

2 Likes

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 :sob:

1 Like

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!

:hammer_and_wrench: Solution: a temporary fix I found was to :arrow_heading_down:

  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