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.
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.
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!
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.