Skip to main content

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:

Screen Shot 2021-05-19 at 9.04.52 AM


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

Screen Shot 2021-05-19 at 9.05.01 AM


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.

Recently, Figma has been providing some hashed value as suffix of mask, filter, paint, clip, etc.

But I’m not sure this hashed value is unique across all figma files. Are these changes on Figma resolves this issue for good?

We’ve been generating prefixes based on component full name, but if Figma is covering this workaround, I’ll remove our manual workarounds.



  • old figma output: clip1

  • new figma output: clip1_34430:80285

  • our workarounds by far: imageemptygraphbusiness-clip1 (generate imageemptygraphbusiness based on component full name)

Reply


Terms & ConditionsCookie settings