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

Columns that adapt to different screen sizes while maintaining a fixed aspect ratio, limited to a maximum of two columns

I'm facing a challenge trying to blend a few elements together: My goal is to have two columns take up 100% of the browser width with a height that adjusts relative to this width. I want these columns to switch to one column when the viewport is sma ...

htmlcssresponsive-designmultiple-columnsviewport

Is there a way to position the drop-down menu in front of the slider?

Hey there, I'm currently experiencing some issues with the drop-down menu on my index page. The drop-down items are hidden below my image slider, which is directly underneath my navigation bar. I would really appreciate any help in fixing this so that ...

htmlcssslidernavbar

Collapse the accordion item when a different one is selected

Check out this code snippet that's working on jsfiddle I'm attempting to add a function to close any open accordion items when another one is clicked. I've added a class "open", but I'm having trouble removing the class when a differen ...

javascriptjquerycsstoggle

Bootstrap is designed to dynamically adjust to the size of the browser window, ensuring a smooth

After completing the construction of a new website, I encountered an issue where the styles and layouts are responsive when adjusting the browser window size. However, upon opening responsive inspect tool, no changes occur - columns refuse to break and t ...

htmlcsstwitter-bootstrapresponsive-design

When I type in the TextBox, the CheckBox value should be deactivated if it is unchecked

Whenever I attempt to input text into the textbox associated with my checkbox, the checkbox automatically becomes unchecked. How can I prevent this from happening? <span id="TRAVEL_TYPE_1"><input id="TRAVEL_TYPE_0" type="checkbox" onclick="Update ...

javascriptjqueryhtmlinternet-explorerfirefox

Move the absolute div by sliding it to the left from 120% to -10px

I want to move an absolute positioned div from the left side of the screen to -10px on button click. Here's my attempt so far, but it's not working as expected. Javascript/jQuery $('.button').click(function() { $(this).parent().f ...

javascriptjqueryhtmlcss

Ensure the bottom div is anchored with a top margin

I am attempting to design a contact/information section at the bottom of my webpage, similar to the grey area at the bottom of this site. Here is my HTML code: *{margin:0; padding:0; box-sizing: border-box;} body{ padding-bottom: 0; } body .main{ marg ...

htmlcss

What is the reason for the difference in width between Bootstrap-5 row and regular div blocks?

My code may seem simple, but I have encountered an issue with it: <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="99fbf6f6edeaedebf8e9d9acb7abb7a9">[email protected]</a ...

csstwitter-bootstrapbootstrap-5

Element remains hidden until the developer console is activated

On my website, I've noticed that certain LayerSlider elements are remaining invisible until: The window is resized I disable the Bookmarks bar in Chrome (quite strange, right?) I switch on the Chrome debugger tools This issue is not exclusive to Ch ...

javascriptjqueryhtmlcssdom

Bootstrap: Troubleshooting Margin Problems

I am currently utilizing the Bootstrap sb admin template. I attempted to include 3 columns in a row, but encountered the issue of them being merged together with no space around them. I experimented by modifying the Bootstrap file through a CDN link and pr ...

htmltwitter-bootstrapcss

Shadowy figure in block form

result photo and required modifications The image on the left shows the result I obtained in a browser, while the one on the right displays the desired outcome in Figma. I am struggling with creating a semicircle with a shadow under the coin and implemen ...

htmlcssbootstrap-5

Crushing jQuery's Sortable/Droppable

Having a little issue here. I want to be able to toggle the sortable plugin's behavior by clicking a button - basically switching between sort mode and view mode. I've attempted to achieve this with the following code: function enterSortMode(){ ...

javascriptjquerycssjquery-pluginsjquery-ui-sortable

Hide custom video controls from view

For a while, I was able to hide the controls on my page using position:absolute; and bottom:-36px, which made them pop up when hovering over the player. Recently, however, I noticed that I can now scroll down to see them. How can I maintain the slide-up ef ...

htmlcss

What is the best way to customize the text in the navigation bar at the top of the page

I'm having trouble with the Navigation Bar code in my header. The text is not staying within the header and I can't seem to fix it. Is there a CSS solution to keep the text contained within the header? <div class="header"> <img src= ...

htmlcss

The issue with jspdf is that it is failing to generate PDF documents of

I'm currently developing a resume builder app using ReactJS. One of the functionalities I'm working on is enabling users to download their resumes as PDFs. However, I've encountered an issue with the generated PDFs when using jsPDF. The down ...

javascripthtmlcssreactjsjspdf

Alignment issue with Bootstrap 4 form fields within inline form group

My experience with Bootstrap 4 on certain pages has been quite challenging, specifically when it comes to aligning fields with labels to the left and maintaining an aligned appearance for input fields. Here is the snippet of my code: <div class="wrap ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

Position the Mui Card Action at the Upper Right corner

Struggling to align a checkbox within a MUI card to the top right? It has been a challenge for me as well. Here is an image of my current layout . I really want that button to be placed in the top right corner, even when the window size changes. Below is ...

htmlcssreactjsmaterial-ui

apply full width styling to bootstrap select dropdown

<div align="center" class="form-group"> <select v-model="subject" class="form-control"> <option v-for="n in papertypes" class="">{{ n.type }}</option> </select> <br> By default, Bootstrap makes the s ...

cssbootstrap-4

Switching hover behavior on dropdown menu for mobile and desktop devices

I have implemented a basic JavaScript function that dynamically changes HTML content based on the width of the browser window. When in mobile view, it removes the attribute data-hover, and when in desktop view, it adds the attribute back. The functionalit ...

javascriptjqueryhtmlcsstwitter-bootstrap

Images in the navigation bar are bouncing around on the page, even though the CSS and HTML configurations

We are experiencing some erratic behavior with our nav bar images that seems to occur only on page refreshes. The issue appears to be related to the loading of our sprite, which contains all the images for the nav bar links. Despite trying different float ...

csshtml