New to WIP?
We're a group of makers shipping together. We help each other stay accountable and reach our goals.
Apply for access
Topics
Back
Question
Can't make svg's work on my website. Any tips?
Hey everyone 👋
I've been trying to upload all the images on my website as .svg.
All were made in Figma.
The weird thing is that my logo uploaded fine but the "News from" section and the hero image on the left are not working. I'm using Carrd.co as the host/editor and funnily enough, these pics appear in the editor and get "published". And thus I'm not sure whether it's a problem with Carrd or with rendering on Chrome's or Safari's site.
Here's the website I'm talking about: https://twoxfootball.com/
Right now the logo (TwoxFootball) in .svg and works fine but the rest is either .jpg or .png.
Did you have a similar problem? And if so, please let me know how to solve it :)
I've been trying to upload all the images on my website as .svg.
All were made in Figma.
The weird thing is that my logo uploaded fine but the "News from" section and the hero image on the left are not working. I'm using Carrd.co as the host/editor and funnily enough, these pics appear in the editor and get "published". And thus I'm not sure whether it's a problem with Carrd or with rendering on Chrome's or Safari's site.
Here's the website I'm talking about: https://twoxfootball.com/
Right now the logo (TwoxFootball) in .svg and works fine but the rest is either .jpg or .png.
Did you have a similar problem? And if so, please let me know how to solve it :)
👋 Join WIP to participate
Got troubles on carrd if the svg contained gradients. Might it be something similar?
Hmm, actually it seems like Carrd doesn't accept .svg's with images in it. The logo is just text and works fine. Yet, the "news from" section is made of various graphics which seems to cause trouble.
Can you post a page that has "broken" SVGs and call them out? It will be a bit easier to debug that way.
Yea sure, twoxfootball.com contains the "news from" image in .png which works fine. Contrary, txf2.carrd.co/ has "news from" image in .svg and it doesn't show up.
@marc pointed out earlier that the image seems to be missing like Carrd shows it being uploaded but doesn't do it for real.
Yeah, it looks like the SVG URL is 404ing. I see that there is a ?v= query at the end, do you control that? If so, I wonder if it's pointing to an old (or non-existent) version.
Not really. I guess Carrd adds it once I add the image. Still, the working .svg contains the same looking URL/directory.
Odd. Then yeah, it might just be Carrd not working with these "nested" SVG images. Maybe you could open a support ticket with them.
Did just that (as I run out of ideas). And AJ has already responded "Ah, looks like this SVG has encoded data (in this case encoded PNG data). Afraid we don't support SVGs that do this due to the potential security threat they can pose." So,.svg made of other images won't work with Carrd.
Ah, there you go! You could also have them all embedded and load them next to each other. But one big PNG is probably good enough.
Yea, that might be the way. I was going for .svg to get better quality and a lighter file but that seemingly won't work "p