Junky borders when exporting in SVG

[Fran]

Hi there!

I’m having some issues when trying to export SVG. The result shows some junky borders like some noise.

I’m doing the same with other design software and there’s any problem. Any suggestions?

Thanks

[VicStrick]

Hi Fran!

Here are my findings
Exporting SVGs with shadows is wonky, I have a work around, but its hacky.

Things I tried but failed
Disconnecting the outline from the fill, creating 2 layers and applying the shadow on each layer:

• Shadow applied on fill: Same problem, no difference
• Shadow applied on stroke: No “clipping” outside of expected area BUT added shadow on fill layer EVEN THO I unticked the checkbox “Show behind transparent areas” → Looks like a bug?

Work around

1. Disconnect fill and stroke to create 2 layers
   

   

2. Duplicate stroke layer, outline it and trim it for the bottom part
   

   

3. Add Fill (white in your case) and shadow to the duplicated stroke layer and make the fill layer (from the first step) a bit smaller
   

   

4. Outcome (this is opened in chrome):
   

   

This should eliminate this weird “fringe” effect outside of the area. This is just a workaround and I feel like exporting SVGs is still very buggy in Figma.

Hope this helped you

[Fran]

Thank you so much, Victor! You couldn’t have explained it better

I hope Figma improve it in the future but since then it’s good to know there’s a solution.

Best!