Firefox throwing XML parsing error when SVG is encoded as data URI

Check out my codepen demo showcasing the issue: codepen.io/acusti/pen/mJmVRy

Encountering an error when trying to load 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='
----------------------------------------------------------------------------^

To reproduce this error, simply click on the data URI string in Firefox developer tools (in the CSS Rules panel while inspecting the .separator element), where a tooltip indicates “Could not load the image”. You can also paste the Location string from the error message above into your Firefox address bar.

cssfirefoxsvg

Answer №1

Your data URIs should not include # characters; they need to be escaped as %23 instead.

The unescaped # symbol is reserved for marking the beginning of a fragment identifier, as explained in Wikipedia. Firefox correctly flags it as a parsing error.

Answer №2

If you need to encode special characters, there is an online tool available at

This tool supports encoding characters such as:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to remove a pseudo element in CSS using Internet Explorer

I've been struggling to make some pseudo elements work in Internet Explorer, but it seems like I can't get it to function as intended. It's as if IE is ignoring the CSS rules that I have set up for these elements, and it's quite frustr ...

cssinternet-explorerie-developer-tools

Achieving perfect alignment for a div that can adapt to different sizes and

Struggling with my CSS skills, I have spent countless hours trying to center a fixed/dynamic size div. The setup involves multiple images within a 100x100 size frame. Upon clicking on an image (thanks to jQuery), #fade is triggered to reveal a window showc ...

jquerycss

The background of the wrapper div refuses to expand beyond the original size of the browser window

I'm currently in the process of developing a website, focusing on establishing the fundamental structure of my design to facilitate the addition of content and allow for the dynamic expansion of the div based on the length of the content. Nevertheless ...

htmlcss

How to position footer at the bottom of Material UI cards - see example below

After getting inspiration from the material-ui example of cards, I wanted to create a grid layout with multiple cards. My goal was to make all the cards have equal height (which I achieved using height:100%) and position the footer at the bottom of each ca ...

javascriptcssreactjsmaterial-ui

The communication factor that triggers the expansion of the mother element

I've been struggling with this issue for quite some time. Here is the challenge at hand: I am in the process of developing a library to streamline AJAX calls and neatly display error messages directly within a form. The dilemma: Whenever the messag ...

htmlcss

What is the best way to center an image within its div, especially when the image size may vary and could be larger or smaller than the div wrapper?

Is there a way to horizontally center an image inside a div, regardless of the size difference between the image and its wrapper? I am aware of a Javascript solution, but I am specifically looking for a CSS-based solution. The following sample code does ...

css

In the realm of HTML Canvas, polygons intricately intertwine with one another

Currently, I am attempting to create multiple polygons from a large JSON file. Instead of being separate, the polygons seem to be connected in some way. The project is being developed in next.js. Below are the relevant code snippets: Canvas.tsx // ../co ...

cssreactjsnext.jshtml5-canvaspolygon

A difference in the way content is displayed on Firefox compared to Chrome, Edge, and Safari

Recently, I encountered an issue with a tool I had developed for generating printable images for Cross-Stitch work. The tool was originally designed to work on Firefox but is now only functioning properly on that browser. The problem at hand is whether th ...

javascripthtmlcssfirefox

Ensure that the Javascript file is included before the CSS file to prevent any margin

I have external files for JavaScript and CSS. According to This question, they suggested that including JavaScript before CSS could enhance performance. However, I noticed a discrepancy in Chrome when I load JS before CSS - the .offset() function returns a ...

jquerycssgoogle-chromeoffset

Challenges with displaying HTML website on mobile platform

Hey there! I admit that my website may not be the greatest, but bear in mind that this is just a school project page. My current issue is with the mobile view styling - the hamburger menu should replace the nav bar on smaller screens, but it's not wor ...

htmlcss

pictures on the blog entries

I'm looking to customize the look of images within a section. I want to add borders to the images, but since they are being added dynamically as content in blog posts, I can't reference them directly. Can you recommend a way for me to achieve thi ...

htmlcss

Maintaining a sticky footer that remains visible throughout the content as the screen is resized

For more information, please visit my website at I attempted to implement a "sticky footer" technique following the steps outlined in this tutorial (http://ryanfait.com/sticky-footer/) Unfortunately, the sticky footer does not function properly when resi ...

htmlcss

CSS swapping versus CSS altering

Looking to make changes to the CSS of a page, there are two methods that come to mind: Option 1: Utilize the Jquery .css function to modify every tag in the HTML. For instance: $("body").css("background : red") Alternatively, you can disable the current ...

javascriptjquerycss

List items out of place because of CSS incompatibility in Firefox and Chrome

After creating a list of names displayed in an <ul>, I implemented some CSS styling only to encounter browser-specific issues. In Chrome: The list element is shifted by one row. In Firefox: All list items are collapsing into one item. Here&apo ...

htmlcsslistoverflow

What is the process for aligning rows with the selected option from the drop-down menu

Alright, so here's the scenario: I have created a table along with two drop-down filters. The first filter is for selecting the Year, and it offers options like "All", "2023", "2022", and "2021". When I pick a specific year, let's say "2022", onl ...

javascripthtmlcss

Troubleshooting a live chat box for CSS alignment issues

Need help with aligning a live chat box on every webpage? Check out this example for reference: You can find my code here: https://jsfiddle.net/fn77d0de/2/ ...

jquerycss

The background image is not displaying correctly in the tag td

I'm struggling to display a background image inside a table data cell using CSS. <td class='details-control'></td> When I use the following CSS rules, the image is not displayed: td.details-control { background: url(http:// ...

jquerycsshtml

Update the class name by utilizing template literals

I'm currently in the process of mastering template literals as I have a project where I need to utilize them. However, I seem to be encountering an issue that I can't quite figure out. Here is the code that is currently working: const classes = ...

javascriptcssreactjsmaterial-uistyles

Like button for Facebook located at the bottom of a static webpage

I am facing an issue with my web application where it does not scroll properly, especially when there is a Facebook button at the bottom. The behavior in Chrome and Firefox is inconsistent and causing some trouble. In Chrome, the div repositions correctly ...

javascriptcssfacebook-like

Issue with automatic compiling in Sublime 2 for less2css

Whenever I try to save my style.less file, the automatic compilation doesn't happen. Is there a mistake in how I've set it up? Here's what is currently in my ox.sublime-project file: { "folders": [ { ...

csscompilationlesssublimetext2