Skip to main content

I have the following problem. It happened twice so far and i can only pinpoint it to rectangles with round corners

i have an icon i created in figma yesterday. 

the earpads of these headphones are rectangles with rounded corners. they have a 1.5px stroke and are filled with a semitransparent color. i have to outline the strokes to work well in our application, and so i did. what happened afterwards is that the code of the 20 px SVG export included NaN instances, which broke our builds.

<path d="M16.7687 12.9732C16.8835 12.433 17.4145 12.0881 17.9547 12.203Lnan nanLnan nanL17.9547 12.203C19.5754 12.5474 20.6099 14.1405 20.2654 15.7611L19.8496 17.7174C19.5051 19.3381 17.9121 20.3726 16.2914 20.0281Lnan nanLnan nanL16.2914 20.0281C15.7512 19.9133 15.4064 19.3823 15.5212 18.8421L16.7687 12.9732Z" fill="#BD10E0" fill-opacity="0.25"/>

the only ways to bypass this export issue have been so far: unite all the strokes, if possible, and/or separate the filled part of the rectangles with rounded corners and do not outline them.

this problem was with a newly created icon, but it happened a couple of weeks ago with an old icon that included a rectangle with only rounded corners on one side.

this used to work well… what happened? is there a way to fix this?

Be the first to reply!