Skip to main content
Solved

Junky borders when exporting in SVG

  • April 26, 2024
  • 2 replies
  • 440 views
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

love

Best answer by 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

    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 😸

View original

2 replies

VicStrick
  • VicStrick
  • New Member
  • 5 replies
  • Answer
  • April 26, 2024

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 😸

Fran
  • Fran
  • Author
  • 1 reply
  • April 26, 2024

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!

VicStrick
1 person likes this
  • VicStrick
    VicStrick

Reply


Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings