SVG export for linearGradients with colons in id showing blank in Chrome

[Joe_Johansen]

I export an icon as an svg from figma, and it gives me the following:

<svg width="25" height="20" viewBox="0 0 25 20" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M23.6429 0.566528H1.35714C0.883036 ...+ lots more" fill="url(#paint0_linear_992:7147)"/>
  <defs>
    <linearGradient id="paint0_linear_992:7147" x1="0.5" y1="0.249985" x2="24.5" y2="17.875" gradientUnits="userSpaceOnUse">
      <stop stop-color="#1890FF"/>
      <stop offset="1" stop-color="#6D39DB"/>
    </linearGradient>
  </defs>
</svg>

Note that the id on the linearGradient has a colon in it (and also the path’s fill which references it).

This seems to work OK in Chrome if the SVG is inline inside my HTML, but if I have it as the src of an img then it just shows up blank. In my code I just changed the colon to another underscore and it worked OK.

It seems like others have experienced similar in Chrome too https:// stack overflow .com/a/49305462/10712394.
Just sharing for anyone else experiencing this, but if Figma could update this on their end it would be handy!

[Harry_Dry]

Hey. Thanks for sharing this. I think this is my exact problem right now. Really hope Figma can fix this ASAP.

Problem is I have 300+ SVG’s and there not icons but text based. So can’t manually edit them. Just wondering if you had any ideas?

https:// help.figma .com/hc/en-us/requests/471866

[dchernyshev]

This is a real problem, I hope the Figma team can fix it.

[JS1]

Same problem, is there any official word on this yet?

[omar_jaff]

I am facing the same issue

[Andre1]

Facing a similar problem at the moment. Makes the SVG export pretty useless if you do SVG exports with gradients that are used on the web.

[Harry_Dry]

There is a fix using a plugin explained here => reddit .com/r/FigmaDesign/ comments/qatdqv/ figma_svg_export_glitch/

Although still really want this fixed by Figma!

[Damola_Taiwo]

Just putting in the word too. Figma please fix this asap. Issue is seriously truncating many workflows.

[JS1]

I can’t believe there is no official word on this yet, this really breaks svg export!

[dchernyshev]

Figma team, still not working

SVG export for linearGradients with colons in id showing blank in Chrome

This is a real problem, I hope the Figma team can fix it.

[Lishay]

Any updates here? this is a real pain in the ass bug!

[Roman_Koncek]

This is actually a chrome bug, a svg with colons in ids is valid. Firefox has no problems with it.

[Barnaby]

Hello, we are trying to troubleshoot an issue where Figma is adding a colon to the ID tag of our images. We are importing our images dynamically into our React application using Figmagic. Perviously things worked without issue. Recently, our imported images stopped displaying, something we have traced to the ID attribute that each image is receiving.

We used to see ID attribute like this: image0

Now we see attributes like this, with a colon: image0_205:2

It seems the colon is causing trouble for us, preventing the image from displaying, as is mentioned on a Stack Overflow page: “Colons are allowed inside ID attributes, but hold no special significance. It’s not really advisable to use them because they can sometimes cause problems, such as when used with jQuery or CSS, where the colon has special meaning as a pseudo-selector.”

Is it possible an update to Figma has introduced this change to the way ID attributes are named? Is there anyway to change or override this?

Compare the old with the new here:

[JS1]

Even if it is a bug in chrome, it is not a new bug, it has always been there. Figma recently changed the svg export output, breaking a lot of production asset pipelines. It’s really dissapointing to see how Figma team is not fixing such a breaking change asap.

[Miha]

facing the same issue, hopefully, this can be fixed soon.

[Sean_Linehan]

This is a big, unexpected problem. Please fix!

[Nat_Piyapramote]

I contacted Figma support about this problem.
As of Nov 11, 2021, I think this problem has been fixed.

[Miha]

still not working