SVG在Chrome正常显示但Firefox报未闭合CDATA段解析错误求助

I’ve run into this exact Firefox quirk with SVG CDATA parsing before—let’s break down the solutions that worked for me:

1. Ditch the CDATA Section Entirely #

Your CSS doesn’t contain any characters that require CDATA escaping (like <, >, or &), so you can safely remove the <![CDATA[ wrapper and ]]> closing tag from the <style> block. Firefox sometimes gets finicky with CDATA inside data URIs even when it’s properly formatted, and this bypasses the issue entirely.

Here’s your modified SVG data URI with CDATA removed:

data:image/svg+xml;utf8,<svg clip-rule="evenodd" height="48px" width="48px" fill-rule="evenodd" image-rendering="optimizeQuality" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" viewBox="0 0 5000 5000" xmlns="http://www.w3.org/2000/svg"><defs><style type="text/css">.str0 {stroke:#434242;stroke-width:100} .fil2 {fill:#434242} .fil0 {fill:url(#id0)} .fil1 {fill:url(#id1)}</style><linearGradient gradientUnits="userSpaceOnUse" id="id0" x1="2500" x2="2500" y1="900.02" y2="1950.02"><stop offset="0" stop-color="#FCFCFD"/><stop offset="1" stop-color="#fff"/></linearGradient><linearGradient gradientUnits="userSpaceOnUse" id="id1" x1="2499.86" x2="2499.86" y1="3835.02" y2="1715"><stop offset="0" stop-color="#84ff45"/><stop offset="1" stop-color="#84e45c"/></linearGradient></defs><g id="Layer_x0020_1"><path class="fil0 str0" d="M500 1950v-950c0-55 45-100 100-100h1400l400 300h2000c55 0 100 45 100 100v650h-4000z"/><path class="fil1 str0" d="M600 4100h3800c55 0 98-45 100-100l100-2450c2-55-45-100-100-100h-1500l-400 300h-2100c-55 0-102 45-100 100l100 2150c3 55 45 100 100 100z"/><path class="fil2" d="M800 1100h1100c55 0 100 45 100 100s-45 100-100 100h-1100c-55 0-100-45-100-100s45-100 100-100z"/></g></svg>

2. Test with Base64 Encoding (If You Need CDATA) #

If you ever need CDATA for more complex CSS, try encoding your SVG as base64 instead of using UTF-8 escaped characters. This avoids any XML parsing conflicts entirely because Firefox treats base64 data as a raw blob. You can convert your SVG code to base64 using any local tool or script, then format the data URI like:
data:image/svg+xml;base64,[your-base64-string]

3. Verify Escaping Consistency #

Double-check that all < and > characters in your data URI are properly escaped to < and >. While your code looks correct, sometimes a missing escape (especially around CDATA) can trip up Firefox’s stricter XML parser.

内容的提问来源于stack exchange，提问作者onok