Why doesn’t my . svg work in Firefox?

Question

My . svg is not loaded in Firefox, in Chrome it works normal. I am using css to do this, with the property background: url('data:image/svg+xml...). I made a Jsfiddle for example, containing all the code.

Edit: I don’t want to use Base64.

Answer 1

Your problem is because of " # " in the color of fill!

[Deprecation] Using unescaped '#' characters in a data URI body is deprecated and will be Removed in M68, Around July 2018. Please use '%23' Instead. See https://www.chromestatus.com/features/5656049583390720 for more Details.

If you replace the value of the colors by a "string" guy red or black that will work or change # for %23 as suggested by Warning above. The old versions of Chrome give this warning, despite being able to render the color, but it seems that the older Firefox does not even show the color.

You can test here that the us in the newest Firefox will run.

.modalFrame {
    overflow: hidden;
    height: 50px;
    width: 100%;
    background: url('data:image/svg+xml;charset=utf-8,<svg version="1.1" width="450" height="100" margin="20px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 250 100"> <path fill="red" d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"> <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" from="0 50 50" to="360 50 50" repeatCount="indefinite" /> </path><text fill="darkgray" x="40%" y="60%" font-family="\'Lucida Grande\', sans-serif" font-size="24">Carregando</text> </svg>') 0px 0px no-repeat;
    background-position: center;
}

<div class="modalFrame"></div>

Answer 2

Firefox interprets the character # as a Fragment Identifier.

To resolve replace all # within the URL function by %23.

In your case you must replace:

• <path fill="#1e7bbf"... for <path fill="%231e7bbf"...
• <text fill="#666" for <text fill="%23666"

See the Jsfiddle corrected.

.modalFrame {
  overflow: hidden;
  min-height: 550px;
  height: 100%;
  width: 100%;
  background: url('data:image/svg+xml;charset=utf-8,<svg version="1.1" width="450" height="100" margin="20px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 250 100" enable-background="new 0 0 0 0" xml:space="preserve"> <path fill="%231e7bbf" d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"> <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" from="0 50 50" to="360 50 50" repeatCount="indefinite" /> </path><text fill="%23666" x="40%" y="60%" font-family="\'Lucida Grande\', sans-serif" font-size="24">Carregando</text> </svg>') 0px 0px no-repeat;
  background-position: center;
}

body {
  font-family: 'Roboto', sans-serif;
  overflow: hidden;
  background-color: #000000;
  text-align: center;
  height: 100vh;
}

<div class="modalFrame"></div>

source: SVG data image not Working on Firefox