Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="ff-worky">Works in Firefox.</div>
<div class="ff-no-worky">Does not work in Firefox.</div>>
<div class"base">base</div>
<div class"test">base64</div>

SassMeister-input.scss

// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// ----


div {
  box-sixing: border-box;
  margin: 30px;
  width: 200px;
  height: 80px;
  padding: 10px;
  text-align: center;
  background-color: green;
  color: white;
  float: left;
}

.ff-no-worky { //Doesn't work in Firefox. Note the hash # in front of the fill color.
  background-image: url('data:image/svg+xml;utf8,
  <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
   <rect width="300" height="100" fill="#000000" />
  </svg>' );
 }

.ff-worky { // Works in FF. There's no hash in front of the fill color */
  background-image: url('data:image/svg+xml;utf8,
  <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
   <rect width="300" height="100" fill="000000" />
  </svg>' );
}
.test, body {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDY0IDY0IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2NCA2NCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cGF0aCBmaWxsPSIjNjUyQzkwIiBkPSJNNDUuOSwyNC45YzAsMC4zLDAsMC42LDAsMC45YzAsOS41LTcuMiwyMC40LTIwLjQsMjAuNGMtNC4xLDAtNy44LTEuMS0xMS0zLjJjMC41LDAuMSwxLjEsMC4xLDEuNywwLjFjMy4zLDAsNi41LTEuMSw4LjktMw0KCWMtMy4xLTAuMS01LjgtMi4xLTYuNy01YzAuNCwwLjIsMC44LDAuMiwxLjMsMC4yYzAuNywwLDEuMy0wLjEsMS45LTAuMmMtMy4zLTAuNy01LjctMy42LTUuNy03LjF2LTAuMWMwLjksMC41LDIuMSwwLjgsMy4yLDAuOQ0KCWMtMS45LTEuMy0zLjItMy41LTMuMi02YzAtMS4zLDAuNC0yLjUsMS0zLjZjMy42LDQuMyw4LjgsNy4yLDE0LjgsNy41Yy0wLjItMC41LTAuMi0xLjEtMC4yLTEuNmMwLTQsMy4yLTcuMiw3LjItNy4yDQoJYzIuMSwwLDMuOSwwLjgsNS4yLDIuMmMxLjctMC4zLDMuMi0wLjksNC42LTEuN2MtMC41LDEuNy0xLjcsMy0zLjEsNGMxLjQtMC4yLDIuOC0wLjYsNC4xLTEuMUM0OC41LDIyLjYsNDcuMywyMy44LDQ1LjksMjQuOXoiLz4NCjwvc3ZnPg0K');
  //background-image:url('http://upload.wikimedia.org/wikipedia/en/6/6e/Jack_in_the_Box_2009_logo.svg');
}
.base {
  background-image: url('http://placekitten.com/g/200/300');
}

SassMeister-output.css

div {
  box-sixing: border-box;
  margin: 30px;
  width: 200px;
  height: 80px;
  padding: 10px;
  text-align: center;
  background-color: green;
  color: white;
  float: left;
}

.ff-no-worky {
  background-image: url('data:image/svg+xml;utf8,\a   <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">\a    <rect width="300" height="100" fill="#000000" />\a   </svg>');
}

.ff-worky {
  background-image: url('data:image/svg+xml;utf8,\a   <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">\a    <rect width="300" height="100" fill="000000" />\a   </svg>');
}

.test, body {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDY0IDY0IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2NCA2NCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cGF0aCBmaWxsPSIjNjUyQzkwIiBkPSJNNDUuOSwyNC45YzAsMC4zLDAsMC42LDAsMC45YzAsOS41LTcuMiwyMC40LTIwLjQsMjAuNGMtNC4xLDAtNy44LTEuMS0xMS0zLjJjMC41LDAuMSwxLjEsMC4xLDEuNywwLjFjMy4zLDAsNi41LTEuMSw4LjktMw0KCWMtMy4xLTAuMS01LjgtMi4xLTYuNy01YzAuNCwwLjIsMC44LDAuMiwxLjMsMC4yYzAuNywwLDEuMy0wLjEsMS45LTAuMmMtMy4zLTAuNy01LjctMy42LTUuNy03LjF2LTAuMWMwLjksMC41LDIuMSwwLjgsMy4yLDAuOQ0KCWMtMS45LTEuMy0zLjItMy41LTMuMi02YzAtMS4zLDAuNC0yLjUsMS0zLjZjMy42LDQuMyw4LjgsNy4yLDE0LjgsNy41Yy0wLjItMC41LTAuMi0xLjEtMC4yLTEuNmMwLTQsMy4yLTcuMiw3LjItNy4yDQoJYzIuMSwwLDMuOSwwLjgsNS4yLDIuMmMxLjctMC4zLDMuMi0wLjksNC42LTEuN2MtMC41LDEuNy0xLjcsMy0zLjEsNGMxLjQtMC4yLDIuOC0wLjYsNC4xLTEuMUM0OC41LDIyLjYsNDcuMywyMy44LDQ1LjksMjQuOXoiLz4NCjwvc3ZnPg0K");
}

.base {
  background-image: url("http://placekitten.com/g/200/300");
}

SassMeister-rendered.html

<div class="ff-worky">Works in Firefox.</div>
<div class="ff-no-worky">Does not work in Firefox.</div>>
<div class"base">base</div>
<div class"test">base64</div>