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.

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
6 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!