<story><title>Cloudflare Is Breaking My SVGs?</title><url>https://www.lloydatkinson.net/posts/2024/stupid-problems-require-stupid-solutions-cloudflare-is-breaking-my-svgs/</url></story><parent_chain></parent_chain><comment><author>elithrar</author><text>There&amp;#x27;s ~four of us trying to reproduce this right now, using Astro and Remix, and cannot at all.&lt;p&gt;An important note: React-based frameworks tend to use camelCase attributes vs. hyphen-case (which is the output) in components: including the icon library being used here. Something during the build process is not converting them to hyphen-case.&lt;p&gt;* I&amp;#x27;ve pasted a decently complex SVG exported from Figma into a Remix component verbatim (hyphen-attributes) and it renders fine: &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;9b14a265.test-broken-svgs-remix.pages.dev&amp;#x2F;&quot; rel=&quot;nofollow&quot;&gt;https:&amp;#x2F;&amp;#x2F;9b14a265.test-broken-svgs-remix.pages.dev&amp;#x2F;&lt;/a&gt; (scroll down)&lt;p&gt;* I&amp;#x27;ve rewritten those attributes to camelCase: and again, renders fine - &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;1af766a8.test-broken-svgs-remix.pages.dev&amp;#x2F;&quot; rel=&quot;nofollow&quot;&gt;https:&amp;#x2F;&amp;#x2F;1af766a8.test-broken-svgs-remix.pages.dev&amp;#x2F;&lt;/a&gt;&lt;p&gt;* This is all deployed via the Pages Build system; no local builds at all.&lt;p&gt;* Someone else on the team has an Astro example stood up with the specific unplugin-icons library: &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;astro-svg.pages.dev&amp;#x2F;&quot; rel=&quot;nofollow&quot;&gt;https:&amp;#x2F;&amp;#x2F;astro-svg.pages.dev&amp;#x2F;&lt;/a&gt; - cannot reproduce the invalid SVG attributes.&lt;p&gt;We&amp;#x27;re going to continue investigating but don&amp;#x27;t see this as widespread and don&amp;#x27;t yet have any other reports. That there is a _difference_ between the direct deploy vs. using Pages Builds is a problem, though. We&amp;#x27;ve also asked the Astro folks to understand if there&amp;#x27;s something up here as well.&lt;p&gt;(If not clear: I work at Cloudflare)</text></comment>
<story><title>Cloudflare Is Breaking My SVGs?</title><url>https://www.lloydatkinson.net/posts/2024/stupid-problems-require-stupid-solutions-cloudflare-is-breaking-my-svgs/</url></story><parent_chain></parent_chain><comment><author>asimpletune</author><text>I really empathize with the author, having dealt with many similar weird issues myself. To Cloudflare&amp;#x27;s credit however, since most of the Pages&amp;#x2F;Workers stuff is open source, one can usually find the problem in the source code and submit a fix oneself.&lt;p&gt;It&amp;#x27;s an example of a product that&amp;#x27;s well designed, generous in its free-tier, yet occasionally confounding, probably due to the speed their team moves.&lt;p&gt;Also wanted to add that I appreciate the author writing about the bug and their debugging process. That&amp;#x27;s definitely something I wish I had done more of, instead of thinking at the time &amp;#x27;I filed the issue, does the whole world need to know about this?&amp;#x27;&lt;p&gt;(Sometimes daily reading of HN can have this effect, I think)&lt;p&gt;Then months go by, the issue I filed was moved or something happened to it, and I lost a way of tracking it... So I think it&amp;#x27;s important to a.) file the issues but b.) document the issue in your own way while everything&amp;#x27;s fresh in your mind.</text></comment>