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!
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?
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.