Stupid Problems Require Stupid Solutions (Cloudflare Is Breaking My SVGs)
Cloudflare Pages is inexplicably mangling SVG attributes, causing icons to be malformed, missing colours, and broken. Attributes such as clip-path become clippath. After a day of trying to figure this out, creating reproductions, sanity checking against local builds, comparing with a Netlify-based deployment, and asking around on the Cloudflare Discord, I wrote a stupid solution to this stupid problem. I’m hoping it will only be temporary.lol
Background
I’ve been improving how I handle icons on my site. The old process was frustrating and time-consuming: downloading SVGs, correcting misalignments, using SVG/XML linting tools, adding a viewBox and stripping out hardcoded heights and widths — seemingly, some icon authors do not believe in making icons easily resizable or even resizable. I often had to adjust alignments even with supposedly “consistent” icon sets like Font Awesome. Sadly, I doubt any of this is unfamiliar to anyone who has worked with icons and icon sets.
I found the unplugin-icons library which uses Iconify Design. I don’t intend to go into a lot of detail as it’s not too relevant, but just know it’s a vastly superior option for handling icons.
Where did my colours go?
Everything looked perfect locally, and it was a relief to finally be able to delete the collection of SVGs I’d been amassing. But the moment I deployed to Cloudflare Pages, I immediately ran into something incredibly bizarre. The icons were broken!
The simpler icons were fine, like this RSS/Feed icon.
But not all of them were fine, mostly the ones with colours and gradients and more complex shapes. Depending on the icon, it could mean some colours were simply different shades. Other times it could mean an entirely blacked out icon.
Narrowing in on the cause
I was able to exclude some possibilities by running diffs on the resulting sets of HTML. I compared local builds, builds on Netlify, and builds on Cloudflare Pages.
- Astro, the static site generator I use. Local and Netlify builds are OK.
- The icon library I’m using. Local and Netlify builds are OK.
Naturally, the next step was to see exactly what’s up with the icons.
