Stroke not aligning correct when exporting

Hi

We are experiencing an issue when exporting components. In short terms what happens is that when our developers are exporting our button to .svg from Figma, the alignment of the stroke/outline is changed from “inside” to “center”. This means that the button is now 66x66 px instead of 68x68 px.

Figma:

Illustrator:

The strange thing is, that when adding a dropshadow to the button it now exports as 68x68 as intended. Just without the shadow.

However, the stroke is still aligned “center” and not “inside” as intended.

Our developers are going nuts. I guess this needs to be fixed…

Page 1 / 1

This is not supported in the SVG format. offset - Can you control how an SVG's stroke-width is drawn? - Stack Overflow

You need to outline the stroke first if you need it drawn exactly like this. But I don’t think the practice of exporting a button as SVG is good in the first place.

Okay - thank @Gleb. I see.

But that doesn’t help me understand why the width and height is correct when there is a dropshadow on it when exporting? And incorrect when there is not? Any idea?

I agree that it is not optimal, but this is for a very simple and low tech accessory with an inferior screen which is attached to some other hardware. So they need to put everything in the firmware.

Checking the SVG in Illustrator isn’t much better as it has its own quirks (specifically in the way it handles drop shadows). Better check the SVG code and preview it in the browser or directly on the device you want to use it on.

Not sure about why Figma export is different though. I believe Figma should try to outline this stroke so it can be exported in SVG correctly. Maybe it does this when you apply shadow for some reason?

Thanks @Gleb. No - the stroke is still centered but the dark background fills to the edge of the stroke.