If you've tried adding an SVG image to your Carrd site and it causes you issues, you're not alone. It’s a frustrating problem many of us have come across.
There are two main issues people experience, so here’s a quick breakdown of them and how to fix.
Problem 1: SVG not appearing on a published Carrd
You’ve uploaded an SVG image using the Image element in Carrd, and everything looks fine in the builder. However, once you publish the site, the SVG doesn’t appear on the live site. You may even have noticed you can see the code for the image in developer mode. And oddly, if you upload a PNG instead, it works just fine.
Why this happens
Carrd applies strict filtering to SVG files for security reasons. SVGs, unlike other image formats like PNG, can include code that can be risky if not handled properly, such as embedded scripts, filters, or external references.
While Carrd generally handles simple SVGs without issue, things like filters, shadows, or embedded images in the SVG file can cause the platform to reject it silently.
The solution: simplify your SVG
To make your SVG work in Carrd, you'll need to "simplify" it. This means stripping out any advanced features like shadows, filters, or embedded images. You want your SVG to be as basic as possible, focusing purely on clean, vector-based shapes.
If you’re working with an SVG file from a designer, you’ll need to ask them to provide a simplified version of the file. Be prepared for some trial and error, as even small changes can make a difference in how Carrd handles the file.
Here are a few tips to simplify your SVG:
- Remove any filters, shadows, or effects
- Avoid using embedded images inside the SVG
- Stick to classic vector elements like paths and shapes
Problem 2: your Carrd site will not publish with an SVG
You're uploading SVGs saved from an app like Inkscape or Sketch, or AI logo builders like Looka, and your site is failing when you hit Publish.
Why this happens
The SVGs saved from these apps can end up in formats Carrd can't quite understand. So this will cause your site to fail on Publish.
The solution: save them differently
You will need to save the files explicitly for use on the web. In Inkscape, for example, this can be done by selecting "Optimized SVG" as the output format. Other apps may have something similar, but if not you may need to open the SVG in something that does.
There's a free, browser based version of Photoshop called Photopea.com where you can open the SVG, then export it as an optimized SVG, or failing that as a PNG.
Final thoughts
While Carrd's handling of SVGs can be frustrating, simplifying or re-saving the file usually resolves the issue. If you're having trouble with a specific SVG, go back to the designer and ask for a more basic version – just be aware that you might have to tweak it a couple of times before it works. If it’s a vector you’ve found online, you will need to either edit or re-save it yourself, or ask a designer to.
Written by
