FIXED: SVG exports at a different size to W & H values in editor

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.

What if I’m exporting not in 1x?

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.

8 Likes