I have CSS code that sets the background of an element to an SVG image, it works fine in Chrome but in Firefox I get escape characters everywhere and my graphics won’t show.
Why is firefox giving me all these \?
background-image: url("data:image/svg+xml;utf8,<?xml version=\"1.0\" encoding=\"utf-8\"?> <!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\"> <svg version=\"1.1\" id=\"Isolation_Mode\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" width=\"19.636px\" height=\"10.83px\" viewBox=\"0 0 19.636 10.83\" enable-background=\"new 0 0 19.636 10.83\" xml:space=\"preserve\"> <polyline fill=\"none\" stroke=\"#e6e5e1\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-miterlimit=\"10\" points=\"2.232,1.882 9.818,8.741 17.403,1.882 \"/> </svg>")
You are using double quotes for both the url and for the data contained in the URL. The usual thing is to use single quotes for one and double quotes for the other e.g.
or
Firefox is quite right in escaping the inner quotes in your case.
The reason Firefox will not display anything is that the # character is reserved in a URL to indicate a fragment identifier and needs to be escaped as %23 if you're not using it as that. So
is invalid. Chrome should reject this but it currently doesn't and therefore does not treat fragment identifiers properly.