title: Understanding SVG query-string parameters
body: <p>I created an SVG file that I intend to use as a background image in CSS.  I want to be able to change the fill color in the SVG using a query-string parameter, like so:</p>
  
  <pre class="lang-css prettyprint-override"><code>#rect     { background-image: url( 'rect.svg' ); }
  #rect.red { background-image: url( 'rect.svg?color=red' ); }
  </code></pre>
  
  <p>As I understand, using a script tag in the SVG, I am able to get the <code>color</code> parameter and update the fill color. Here is an example SVG:</p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;!DOCTYPE svg PUBLIC "-//W3C//DDTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
  &lt;svg version="1.1" xmlns="http://www.w3.org/2000/svg"&gt;
      &lt;rect width="100%" height="100%" /&gt;
  
      &lt;script&gt;
      &lt;![CDATA[
          var params = { };
          location.href.split( '?' )[1].split( '&amp;' ).forEach(
              function( i )
              {
                  params[ i.split( '=' )[0] ] = i.split( '=' )[1];
              }
          );
  
          if( params.color )
          {
              var rect = document.getElementsByTagName( "rect" )[0];
              rect.setAttribute( "fill", params.color );
          }
      ]]&gt;
      &lt;/script&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>Going to the file directly, or using an object tag seems to work, but for CSS background images or img tags, the color parameter is ignored.</p>
  
  <p>I'm not exactly sure what is going on here, and I was hoping that there would be an explanation or alternative solution to what I'm trying to accomplish (preferably without resorting to server-side processing).</p>
  
  <p>Here is a jsFiddle showing the different render methods: <a href="http://jsfiddle.net/ehb7S/" rel="noreferrer">http://jsfiddle.net/ehb7S/</a></p>