Figma Support Forum

Transparent Filler Elements removed from SVGs

I’m trying to use “filler/dummy” elements to give dimensions to groups but they are always removed from SVG exports if I give them transparent fills or strokes.

For example, I’ve noticed that figma’s 3-point stars are not centered:

You’ll see that the star object is selected here, but the center of the bounding box is not in the correct place.

My strategy here is to add a blank square in the group so that the surrounding group has the correct center:

The problem here is that SVG exports are doing some sort of optimization to remove any shape that is not visible. If I had a stroke with a low opacity, the element is included in the export but I want to avoid that because that color can potentially be visible in the export.

The reason I’m doing all of this is so that animations I do on the shape are centered around the correct point. While the 3-point star being off-centered, is one problem, the main thing I’m looking to solve is the fact that this filler object is getting removed.

I have tried using the SVG Export plugin but it has the same issue, even without all of the SVGO optimizations turned off, so I believe it’s an issue further upstream.

Not sure if this helps but have you tried exporting with the “contents only” option unchecked?
This should export the whole frame even if it doesn’t have a fill.

@Josh thanks for the suggestion! Unfortunately, that option doesn’t affect whether or not the invisible square is being exported or not.

I’ve created this Figma file if you or anyone else wants to play with it.

1 Like

Ahh I see. So you actually don’t need the rectangle within the group. You can just export the frame making sure the “contents only” box is unchecked. The trick here though is that the svg grabs the canvas color as a fill. To get around this you can temporarily hide the canvas fill and then export.

See this file here for an example.

I do need the rectangle that’s within the group because it give the group the dimensions I want.

I’m doing this because I am animating the SVG and want to rotate the group around the correct center without doing a lot of manual intervention.

Trying to figure out if Figma is doing some sort of optimization to remove invisible elements (which I don’t want it to do).

Hmm I see. Still looking at finding a solution. Being that you’re animating it are you able to just change the fill of the SVG after the fact (via code) ?

Essentially this:
<svg width="124" height="124" viewBox="0 0 124 124" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect width="124" height="124" fill="none"/> <path d="M107.333 61.8842L66.9633 77.7404L33.0332 104.739L39.4725 61.8842L33.0332 19.0296L66.9633 46.028L107.333 61.8842Z" fill="black"/> </svg>

@Josh yes, right on both counts.

My best option with how things stand is to remove the fill after the fact.

But I would love to know if this is documented/intended behavior from Figma? I’m actually impressed that this optimization happens at all, but of course, in my situation it isn’t desirable.

1 Like

Got it. I’ll have to check in with the team on the specifics behind this and get back to you. Sorry I couldn’t be more helpful here. :slight_smile:

Appreciate it, Josh! Thanks for sticking with it to understand this issue.