I just started experimenting with Figma today, so I hope this is not something someone else covered before.
I’m trying to export text as SVG and I’m noticing that the files comes with extra space that is not supposed to be there.
Solved
[SOLVED] Bug when exporting text as SVG
Best answer by Danny_Wyatt
To everyone facing the same issue here’s what’s happening:
Figma and Affinity Designer approach the export differently, and that’s why I was getting different results.
Apparently (and this is something I don’t know anything about when it comes to the reasoning behind it), SVG won’t accept decimals like 23.4px and stuff like that), so when you open an SVG with decimals, the software (at least Affinity Designer is doing this) will automatically compensate and add extra space to the nearest pixel value. So if my image’s X value is 23.4px, Affinity Designer will make the document 24px. That’s where the extra empty space comes from.
Now Affinity Designer seems to automatically align the top and left edges of the text/shape to the top and left edges of the document itself so that’s why the only empty space I can eventually have is bottom and/or right. It assumes the top and left edges as 0px on both X and Y axis, unlike Figma that seems to approach this a different way. Maybe relative to the document, I guess.
Figma, on the other hand, will not do this so it seems to distribute the space all around the text, that’s why I get the empty space on top, bottom, left, right. So the only way to fix this (apparently) is to convert the text to curves, align the top and left edges of the text to a whole number (for example 23.4px on the X axis would become 23px and the top instead of 17.8px on the Y axis would become 18px). Now when I export it, I get no space and I experience the same as with Affinity Designer (eventually space at the bottom and/or right.
I wish/hope Figma could fix this behavior and make it work like Affinity Designer, because converting text to curves is not a good option, even if we can undo the changes. It’s just extra steps.
Hope this helps others!
This topic has been closed for comments
Image 1 - Here’s the text inside Figma. You can see that blue “border” around the text touches the edges of the text, so I would assume this is what would be exported
Image 2 - This is what I get when I open it using Affinity Designer, for example. See how it adds empty space around it, even if some areas is very subtle. This version is if I select the text and use the “Outline stroke” when I right click it.
Image 3 - Now look at the same text created and exported from Affinity Designer
Image 4 - What I get when I select the text and don’t use the “outline stroke”, but use the “Outline Text” inside the Export options.
The layers panel shows a different result compared to the version where I apply Outline Stroke (2nd image). Also, if you look closely, you will see that the space around the text on both images is slightly different as well.
Important note: this seems to only happen with text. I tried with a square, and no empty space was added.
Can someone help me figure this out?
Thanks!
Sorry, the fact that this forum doesn’t allow me to edit my post, I noticed that I wrote something wrong.
Image 2 - That’s what I see when I create and export using Affinity Designer. So it doesn’t add any space around
Image 3 and 4 - SVG files created and exported using Figma. Image 3 is create by selecting a text box and using the Outline Text inside the Export window. Image 4 is when I convert the text using Outline Stroke before hitting Export
To everyone facing the same issue here’s what’s happening:
Figma and Affinity Designer approach the export differently, and that’s why I was getting different results.
Apparently (and this is something I don’t know anything about when it comes to the reasoning behind it), SVG won’t accept decimals like 23.4px and stuff like that), so when you open an SVG with decimals, the software (at least Affinity Designer is doing this) will automatically compensate and add extra space to the nearest pixel value. So if my image’s X value is 23.4px, Affinity Designer will make the document 24px. That’s where the extra empty space comes from.
Now Affinity Designer seems to automatically align the top and left edges of the text/shape to the top and left edges of the document itself so that’s why the only empty space I can eventually have is bottom and/or right. It assumes the top and left edges as 0px on both X and Y axis, unlike Figma that seems to approach this a different way. Maybe relative to the document, I guess.
Figma, on the other hand, will not do this so it seems to distribute the space all around the text, that’s why I get the empty space on top, bottom, left, right. So the only way to fix this (apparently) is to convert the text to curves, align the top and left edges of the text to a whole number (for example 23.4px on the X axis would become 23px and the top instead of 17.8px on the Y axis would become 18px). Now when I export it, I get no space and I experience the same as with Affinity Designer (eventually space at the bottom and/or right.
I wish/hope Figma could fix this behavior and make it work like Affinity Designer, because converting text to curves is not a good option, even if we can undo the changes. It’s just extra steps.
Hope this helps others!
This topic was automatically closed after 30 days. New replies are no longer allowed.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.