Asked

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 :)

Working on TwoxFootball.com - all you need to know about football in a brief 2-times-a-week newsletter. At day, Marketing Specialist @ Channels.app
🤖+🌍+👨🏻‍💻+🌎+💤+🌏+🍹

Got troubles on carrd if the svg contained gradients. Might it be something similar?

Working on TwoxFootball.com - all you need to know about football in a brief 2-times-a-week newsletter. At day, Marketing Specialist @ Channels.app

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.

Hi! 👋 I'm Joe Masilotti, an independent developer who's passionate about clean, testable code. I'm making social images easier to create for bloggers.

Can you post a page that has "broken" SVGs and call them out? It will be a bit easier to debug that way.

Working on TwoxFootball.com - all you need to know about football in a brief 2-times-a-week newsletter. At day, Marketing Specialist @ Channels.app

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.

Hi! 👋 I'm Joe Masilotti, an independent developer who's passionate about clean, testable code. I'm making social images easier to create for bloggers.

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.

Working on TwoxFootball.com - all you need to know about football in a brief 2-times-a-week newsletter. At day, Marketing Specialist @ Channels.app

Not really. I guess Carrd adds it once I add the image. Still, the working .svg contains the same looking URL/directory.

Hi! 👋 I'm Joe Masilotti, an independent developer who's passionate about clean, testable code. I'm making social images easier to create for bloggers.

Odd. Then yeah, it might just be Carrd not working with these "nested" SVG images. Maybe you could open a support ticket with them.

Working on TwoxFootball.com - all you need to know about football in a brief 2-times-a-week newsletter. At day, Marketing Specialist @ Channels.app

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.

Hi! 👋 I'm Joe Masilotti, an independent developer who's passionate about clean, testable code. I'm making social images easier to create for bloggers.

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.

Working on TwoxFootball.com - all you need to know about football in a brief 2-times-a-week newsletter. At day, Marketing Specialist @ Channels.app

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