0

I find that this svg renders correctly in Chrome, Firefox and IE11:

background:#000 url('data:image/svg+xml;utf8,<svg width="42px" height="42px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><circle cx="21px" cy="21px" r="21" fill="black"/><rect x="9px" y="10px" width="25px" height="22px" fill="white"/></g></svg>');

However, I am having trouble having these svg icons working across browsers:

This works on Chrome and Firefox but not in IE11:

background:#000 url('data:image/svg+xml;utf8,<svg width="42px" height="42px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><g><circle cx="21px" cy="21px" r="21px" fill="black"/><g><polyline points="20 30 15 20 25 15 20 7" stroke="white" stroke-width="2"/><circle cx="20" cy="30" r="2.2" fill="white" stroke="white"/><circle cx="20" cy="7" r="2.2" fill="white" stroke="white"/></g></g></svg>');
}

I find that this svg works in Chrome only:

background:#000 url('data:image/svg+xml;utf8,<svg width="42" height="42" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><circle r="21" id="svg_2" cy="21" cx="21" fill="#050404"/><path id="svg_3" d="m52.86,21.00981l6.42885,-13.71338l17.14235,0l6.42882,13.71338l-6.42882,13.71425l-17.14235,0l-6.42885,-13.71425z" fill="#ffffff"/></g></svg>');
}

Is there some way to get these svgs working cross browser. I used these svgs based on this

I have tried the following combinations:

background:black url('data:image/svg+xml;utf8,<svg width="42px" height="42px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><circle cx="21px" cy="21px" r="21" fill="black"/><rect x="9px" y="10px" width="25px" height="22px" fill="white"/></g></svg>'),linear-gradient(transparent, transparent);

background:%23000 url('data:image/svg+xml;utf8,<svg width="42px" height="42px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><circle cx="21px" cy="21px" r="21" fill="black"/><rect x="9px" y="10px" width="25px" height="22px" fill="white"/></g></svg>'),linear-gradient(transparent, transparent);

I also tried using the fallback suggested here but it always renders the png:

body {
  background: url(fallback.png);
  background: url(background.svg),
    linear-gradient(transparent, transparent);
}
Community
  • 1
  • 1
vamsiampolu
  • 6,328
  • 19
  • 82
  • 183

1 Answers1

0

You cannot just write out any old set of characters and have them be a url. Some characters have special meanings.

The character # is supposed to be reserved as the start of a fragment identifier. Chrome does not implement this correctly though but Firefox and IE do which is why the final example does not work.

If you replace all the # characters by %23 in the final url it will work in Firefox and IE. E.g.

body {
  background:#000 url('data:image/svg+xml;utf8,<svg width="42" height="42" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><circle r="21" id="svg_2" cy="21" cx="21" fill="%23050404"/><path id="svg_3" d="m5.86,21.00981l6.42885,-13.71338l17.14235,0l6.42882,13.71338l-6.42882,13.71425l-17.14235,0l-6.42885,-13.71425z" fill="%23ffffff"/></g></svg>');
}

I'm not sure about the middle URL, it seems fine to me. base64 encoding it may make it work in IE.

Robert Longson
  • 118,664
  • 26
  • 252
  • 242
  • an example would be helpful, I have tried using %23 instead of # but I get the same error. – vamsiampolu May 18 '16 at 06:52
  • I've added an example which works in Firefox. It just changes the # characters as I suggested. – Robert Longson May 18 '16 at 06:59
  • Not working with IE11 though, I am using [this](http://hastebin.com/muzobezowa.xml) as the `background` with `.` replaced with `%2E` – vamsiampolu May 18 '16 at 07:29
  • You'll have to experiment removing things till you find out what's wrong then. Change the non-working version one element/attribute at a time till you figure it out. – Robert Longson May 18 '16 at 08:28