Figma Support Forum

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

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

Look at the coordinates of this object. The coordinates should be integers, with no fractions.

Good eye! I did this and I got 61x61 :woman_shrugging: At least it’s a consistent ratio, thanks :+1:

Hmm that sounds weird. If this object is nested in another frame, make sure that frame is on integer coordinates as well.

Oh no! I did that and it went back to exporting at 60x61 again!

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? :smiley:

Bam! That worked! Thanks!

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 :slight_smile:

Good to know that the position of a parent element can effect the exported properties of object. This is news to me.

Any idea why that doesn’t get reflected in the editor’s W & H values?

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’s 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.

Non-integer coordinates of an object in Figma, this will mess up exports

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.

1 Like

That makes sense, appreciate you taking the time to break it down :pray: