Skip to main content
Question

SVG not working in img tag or as CSS background

  • November 2, 2021
  • 9 replies
  • 4582 views

Christophe_Verdot

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?

This topic has been closed for comments

9 replies

Pashkella
  • 4 replies
  • November 2, 2021

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.


Christophe_Verdot

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 😕


Pashkella
  • 4 replies
  • November 3, 2021

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


Christophe_Verdot

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


Aaron_Saloff

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.


Pashkella
  • 4 replies
  • November 3, 2021

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


Aaron_Saloff

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 👍


Christophe_Verdot

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


  • 0 replies
  • December 3, 2021

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


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings