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.
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.
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?
