SVG as data URI triggers XML parsing error in Firefox

Question

I made a codepen demo illustrating the problem: codepen.io/acusti/pen/mJmVRy

And here’s the error I get if I try to load the svg content in Firefox:

XML Parsing Error: unclosed token
Location: data:image/svg+xml;utf8,<svg%20viewBox='0%200%20120%20120'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'><circle%20cx='45'%20cy='45'%20r='30'%20fill='#555555'></circle></svg>
Line Number 1, Column 77:

<svg viewBox='0 0 120 120' version='1.1' xmlns='http://www.w3.org/2000/svg'><circle cx='45' cy='45' r='30' fill='
----------------------------------------------------------------------------^

Note: I get that error by clicking on the data URI string in the Firefox developer tools (inside the CSS Rules panel while inspecting the .separator element), where a tooltip says “Could not load the image”. You can do the same thing by just copy-pasting the Location string from the error message above into your Firefox address bar.

Answer 1

It is not valid for data URIs to contain # characters like yours has, you must escape them as %23

The unescaped # character is reserved to indicate the start of a fragment identifier. Firefox is quite right to indicate a parsing error.

Answer 2

you can use the online tool https://www.zhangxinxu.com/sp/svgo/

it support let special characters encoded, such as:

"" => %22
# => %23
% => %25 ...