Problem CSS

adjust.svg

<?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" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500" viewBox="0 0 500 500">
	<path d="M214.286 401.786v-303.571q-41.294 0-76.172 20.368t-55.246 55.246-20.368 76.172 20.368 76.172 55.246 55.246 76.172 20.368zM428.571 250q0 58.315-28.739 107.562t-77.985 77.985-107.562 28.739-107.562-28.739-77.985-77.985-28.739-107.562 28.739-107.562 77.985-77.985 107.562-28.739 107.562 28.739 77.985 77.985 28.739 107.562z" fill="#000000" />
</svg>

jqm-icon-pack-fa.css

.ui-icon-adjust:after {
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%20500%20500%22%3E	%3Cpath%20style%3D%22fill%3A#FFFFFF%3B%22%20d%3D%22M214.286%20401.786v-303.571q-41.294%200-76.172%2020.368t-55.246%2055.246-20.368%2076.172%2020.368%2076.172%2055.246%2055.246%2076.172%2020.368zM428.571%20250q0%2058.315-28.739%20107.562t-77.985%2077.985-107.562%2028.739-107.562-28.739-77.985-77.985-28.739-107.562%2028.739-107.562%2077.985-77.985%20107.562-28.739%20107.562%2028.739%2077.985%2077.985%2028.739%20107.562z%22%20fill%3D%22#ffffff%22%20%2F%3E%3C%2Fsvg%3E");
}

I'm working on converting my open source project jQuery Mobile Icon Pack to use data URIs instead of sprite sheets and I'm running into troubles.

The above CSS renders a half filled circle. It looks correct in Chrome and Opera for Mac. It does not render in Firefox for Mac or IE 10 on Windows 7 (via VM).

I've spent 3 hours poring over the differences between my CSS and the CSS rendered by a library such as jQuery Mobile and I've made every change that I can see to make my SVG the same. I must be missing something but I'm at a loss. Help!

EDIT: Also, your charsets and encodings seem a little funny.

Maybe you need to use a better data: encoder.

Try this one: http://dopiaza.org/tools/datauri/index.php

You should be able to copy these and open in your browser. Worked for me on firefox.

plain text xml:

data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0D%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22500%22%20height%3D%22500%22%20viewBox%3D%220%200%20500%20500%22%3E%0D%0A%09%3Cpath%20d%3D%22M214.286%20401.786v-303.571q-41.294%200-76.172%2020.368t-55.246%2055.246-20.368%2076.172%2020.368%2076.172%2055.246%2055.246%2076.172%2020.368zM428.571%20250q0%2058.315-28.739%20107.562t-77.985%2077.985-107.562%2028.739-107.562-28.739-77.985-77.985-28.739-107.562%2028.739-107.562%2077.985-77.985%20107.562-28.739%20107.562%2028.739%2077.985%2077.985%2028.739%20107.562z%22%20fill%3D%22%23000000%22%20%2F%3E%0D%0A%3C%2Fsvg%3E

base64:

data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjUwMCIgaGVpZ2h0PSI1MDAiIHZpZXdCb3g9IjAgMCA1MDAgNTAwIj4NCgk8cGF0aCBkPSJNMjE0LjI4NiA0MDEuNzg2di0zMDMuNTcxcS00MS4yOTQgMC03Ni4xNzIgMjAuMzY4dC01NS4yNDYgNTUuMjQ2LTIwLjM2OCA3Ni4xNzIgMjAuMzY4IDc2LjE3MiA1NS4yNDYgNTUuMjQ2IDc2LjE3MiAyMC4zNjh6TTQyOC41NzEgMjUwcTAgNTguMzE1LTI4LjczOSAxMDcuNTYydC03Ny45ODUgNzcuOTg1LTEwNy41NjIgMjguNzM5LTEwNy41NjItMjguNzM5LTc3Ljk4NS03Ny45ODUtMjguNzM5LTEwNy41NjIgMjguNzM5LTEwNy41NjIgNzcuOTg1LTc3Ljk4NSAxMDcuNTYyLTI4LjczOSAxMDcuNTYyIDI4LjczOSA3Ny45ODUgNzcuOTg1IDI4LjczOSAxMDcuNTYyeiIgZmlsbD0iIzAwMDAwMCIgLz4NCjwvc3ZnPg==

The encoding might be the problem, but I don't think so. I think it was the way my XML was saved to begin with. I was already using Grunt so I decided to start using GruntIcon. It's working great now. Now I have to go through and resave all of the SVG files with Illustrator. I can batch that though so no worries.