Figma Support Forum

Figma SVG export creates ID conflicts on clipPath elements—workarounds?

I’d like to describe a bug or a limitation I’m encountering with Figma, and I’m curious if there might be a workaround

Given the following:

  • Two SVGs are exported by Figma.
  • Both contain a clipPath element, both with auto-generated ID clip0
  • These two SVGs are both inlined into a single HTML document

The result will be that Safari will apply the last <clipPath> to all other elements that reference ID clip0, effectively clipping it incorrectly for all but the final <svg>.

An example of what results visually on first paint here:

And if you remove the subsequent SVG (or manually edit the file and rename the ID), the SVG will render fine:

As it happens, this is a long-standing behavior in Safari (iOS & macOS) and was documented at length on CSS Tricks last year.

Short of requiring users to go in and manually edit SVG files after export, the only solutions I could imagine are configurations to randomize or hash these IDs so they’re not just incrementing from 0. Additionally, it probably applies to filter and any other internal elements that might need to take an ID.

Anyone have any ideas or run into this?

I should mention that one plugin will address this with its default prefixIds setting: Advanced SVG Export

Gosh this is so annoying isn’t it? Anything with that shared hash on it with play global scope games with you and throw colors, gradients, etc off all the time. Unfortunately there doesn’t seem to be a way to generate unique identifiers through Figma exports, but when you embed your svg with framework plugins they usually have the solution you’re looking for. For instance I use react-inlinesvg for our react app to embed all svg’s and that allows you to pass a uniquifyIDs=true option to it that solves the problem you’ve described. I believe svgo’s cli tool will allow you to pass an option to “uniquify” things like this if you run your svg’s through that.

Hopefully someday Figma will allow this type of export option with their svg support. Good luck with your progress!

I was facing this issue with all my WordPress websites & blaming the plugins for it. Later, I realized it’s due to Figma.