Skip to main content
Question

White line in SVG export (no sub pixels used)

  • February 6, 2024
  • 7 replies
  • 1370 views

Magnus7

Hi! 🙂
I’m having the issue with a white line appearing around my SVG export, even though I have no sub pixels on any of the sizes (width/height, corner radius, box shadow, stroke…none) and all parts of my design is placed on the pixel grid, so no sub pixels there either.

The issue only occurs on SVG export, not PNG.

What could be the problem??

Thanks!

Regards / M

7 replies

Magnus7
  • Author
  • 3 replies
  • February 6, 2024

NOTE - it only seems to happen where the rounding of the shape is, so not on the straight lines, which makes u think it’s probably because of sub pixels used in corner radius but its not - there are no sub pixels used there and it also happens in the circle that subtracts from the main shape.
See attached image


Gayani_S
Figmate
  • Community Support
  • 1935 replies
  • February 7, 2024

Hey there, thank you for reaching out!

I might have come across a similar case in the Forum. In this case the user used a Plugin to make a 3d effect of the logo. After investigating our engineers found out that the issue with SVG exports is related to how certain platforms, such as Chrome, handle antialiasing for SVGs. They were not able to fix the issue. However, there is a workaround, which is quite advanced and may require some technical expertise: Add a shape-rendering attribute to the root SVG tag with the value of “crispEdges” such as shape-rendering=“crispEdges” of the exported SVG file. More info here.

To get this troubleshooting process started, could you let me know how you constructed your vectors? For example, did you import some content, use a plugin, etc.?

Also, can you try to import the SVG back into Figma, and see if the white lines are still present?


Magnus7
  • Author
  • 3 replies
  • February 7, 2024

Hello! 🙂 Thank you for the reply.

Yeah I saw that post.
Ok. Thats too complicated and don’t have the knowledge for adding code.

Sure - I just created a rectangle and a circle in Figma and put them together so that the circle subtracted it’s shape from the rectangle, and I added a stroke and some corner radius. Simple stuff.

Sketch had no problem with exporting the exact same shape without the white line issue. If Sketch can do it, Figma should be able to also, right?


Gayani_S
Figmate
  • Community Support
  • 1935 replies
  • February 8, 2024

Thanks for confirming! You’re absolutely right, you’re not supposed to receive an export with these white lines. I’ve created a support ticket on your behalf, so that our technical quality team can investigate what’s causing this. Your ticket number is #917303, for reference!
It will be helpful if you can share your file link with the team. Please invite support-share@figma.com with “can edit” permission so we can look into this further. Note that users with @figma.com emails on your team do not count towards your billing.

Let me know if you have any further questions. Someone will be in touch with your soon, appreciate your patience!

Thanks,
Gayani


Magnus7
  • Author
  • 3 replies
  • February 14, 2024

Ok!

I have sent the invite. The file is under:
Portfolio & Personal Brand → Portfolio → page called FIGMA SUPPORT, ticket #917303

See attached image for what it looks like when exported



Celine_D
Figmate
  • Community Support
  • 3381 replies
  • February 14, 2024

Hey @Magnus7 ,
I am working closely with Gayani, happy to help!
I checked in our back end and the support has replied to you. Please check your inbox 🙂


j89
  • New Member
  • 1 reply
  • January 21, 2025

Hi! I have the same problem when exporting the SVG file and using it on the website. As soon as the drop shadow is applied, I get the same weird white lines on the edges. Have you been able to fix the issue somehow?


Reply


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