Skip to main content

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


love

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

    Disconnecting Fill and Stroke




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

    Duplicate, outline, trim




  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

    Add fill and shadow to outline + make fill layer a bit smaller




  4. Outcome (this is opened in chrome):

    image




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 😸

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!

Reply


Terms & ConditionsCookie settings