-
-
Save commadelimited/9295185 to your computer and use it in GitHub Desktop.
.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"); | |
} |
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.
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!