I have a 60x60 frame that I am exporting as an SVG. When I export the SVG it has a size of 60x61. This is causing crunchy scaling artefacts in our android app.
Is there anything I can do in the editor to make the SVG export obey the values in the editor?
I’m using the MacOS Figma Desktop App version 95.8
Are there any more nested frames? Just put this frame you are exporting directly to canvas and send it to 0x0, this will definitely do it. And turn pixel grid snapping on in preferences. How do you even get things to such weird positions?
This work involved a bunch of custom components outside of our system + illustrations so somewhere along the line a little too much freeform expressionism got in here
The main problem that can cause export cropping issues is if you have the object on non-integer absolute coordinate or if the object has non-integer scale (with fractions). Absolute means all frames it is nested in should be at integer coordinates too. Or you can align it to the absolute pixel grid ignoring underlying frames, but I think the former is simpler.
You can also check if the object is aligned to pixels by using File → Export… If the object is not aligned to pixels, it will show Origin not aligned to pixel error. Note that sub-pixel size will not trigger this error while still causing the issue with white stripes on the sides.
That’s because export works slightly differently than what is displayed in Figma. It’s a bit easier to explain with raster images but the similar logic applies to SVG export too. Let’s say you have a 10x10 image at 0.5 coordinate. Subpixels will be turned into full pixels and since the image starts on pixel 0 and ends on the 11th (10.5), it will be exported with width/height of 11 pixels. This obviously is not the case for SVG since it can take absolute values but I guess it calculates the bounding box this way. Maybe because SVG can contain raster images.
Even if coordinates you set aren’t sub-pixel in 1:1 export, they can be when exporting in different sizes. Let’s say you are exporting a node in 1.5x for example. Technically, the whole canvas would be enlarged to 1.5 to export this piece at this resolution. This would result in fractional numbers in coordinates. If your frame is standing on coordinates (3, 11), then the result will be at coordinates (4.5, 16.5). I don’t know why it works this way but it does. So to ensure your export at 2.4x works correctly, the object needs to be standing on coordinates divisible by 5 (because 0.4 is 2/5). Alternatively you can set the export dimensions explicitly (e.g. 900w as 375*2.4=900), this way the canvas shouldn’t multiply this way and the coordinates can be any integers.
@Gleb a big “Thank You”. I also had the same issue while exporting PNGs and JPGs. My problem was that in the Width and Height displayed as 120 × 120. As I took a closer look at the rulers on the canvas, it said that my pixel dimensions have been 120 × 120.001. So, it was wrong on third place after the comma.
During the day, I was trying to figure out what happened with my illustration library. In Figma everything was pixel-perfect, on GitHub… not really. At the end of day I figured out this issue, and I can reproduce it, I was so happy about that. Finally an issue and I can solve it. But… this issue is still existing since March. Time to fix it.
If somebody works with illustrations or maintains huge libraries, we need to turn off pixel grid.