Skip to main content

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:


image


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:


image


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.


CleanShot 2021-02-05 at 08.38.53@2x

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

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.

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

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

Hi. Has there been any development regarding this? Also looking to export an SVG without the fill defined

Hi. There is still no progress on this topic, right? I’m still experiencing it today.

This is causing painful workflows for our org too. Please fix.

Reply


Terms & ConditionsCookie settings