title: URL- or Base64- encode strings in Compass/SASS
body: <p>Is there a way to URL- or Base64-encode a string in Compass or SASS?</p>
  
  <p>I want to create an inline SVG background image, like this:</p>
  
  <pre><code>background: transparent url('data:image/svg+xml; charset=utf-8,'
      + '&lt;svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"&gt;'
      + '&lt;/svg&gt;') 0 0 no-repeat;
  </code></pre>
  
  <p>(The reason for creating it inline is that some of the SVG's values need to come from SASS variables.)</p>
  
  <p>The problem is, CSS data URLs are supposed to be URL-encoded, or Base64-encoded. If they're not, then tools like YUI compressor <a href="https://stackoverflow.com/questions/13949588/yui-compressor-is-removing-spaces-from-filter-values">mangle them</a>.</p>
  
  <p>I know that you can <a href="http://compass-style.org/reference/compass/helpers/inline-data/#inline-image" rel="nofollow noreferrer">encode an image from an external file</a>, but I need to encode a string. Does anyone know of a way to do this?</p>