SVG not working in img tag or as CSS background

Hello,

I’ve been sent a figma design to convert into HTML and i seem to have quite some issue with SVG export, everything i export as SVG and try to use in img/src tag or in css is not working, it’s invisible in chrome unless i use object tag instead (which i don’t really want to) while it’s all working in firefox.

Any idea what could be the issue?

2 Likes

Same problem. Windows, latest version of Figma and Google Chrome. This is a bug. Happens only when using gradients. The problem is with these symbols (:digits) which are added to the ID of the gradient.

Before these symbols were not added and gradients worked normally.

Seem that I have to issue on every svg exported from figma (from windows web app) here even without gradient, firefox is ok with them but chrome or edge are not… I’m using object for now but really would prefer be able to use svg in img… hope they come up with a fix soon :confused:

1 Like

What about answer from developers? This is a very critical bug. :face_with_raised_eyebrow:

Yes, i would really love a fix… i end up using object and png instead which isnt optimal at all :disappointed_relieved:

1 Like

Having this same issue too. A temporary workaround that worked for me is to find the places where that “:12345” (or whatever number) are added in the SVG code and remove all of them. holding cmd + d in VSCode when I highlight the first one allows me to do this fast.

Yes. But why suffer so much with every exported svg file? :grimacing:
About VSC. You can highlight first word and press Cmd+F2, than press Delete. More useful for me.

Cool trick with the CMD+F2! Yes I agree this should be fixed for sure so we don’t have to do that every time. Was just posting a temporary workaround so it isn’t a blocker anymore :+1:

1 Like

It works, thanks a lot, i’m good to change all my svg again on the website now :sweat_smile:

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.