title: How to get a rotated linear gradient svg for use as a background image?
body: <p>I've seen a few questions dancing around this, so I hope this isn't too redundant. Ideally, I'd like an <code>image/svg+xml</code> which scales to 100% of it's container. 
  <a href="http://www.colorzilla/gradient-editor" rel="noreferrer">Colorzilla</a> gets me a great start with a <code>data:image/svg+xml</code> </p>
  
  <pre><code>&lt;?xml version="1.0" ?&gt;
  &lt;svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none"&gt;
    &lt;linearGradient id="grad-ucgg-generated" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="100%" y2="0%"&gt;
      &lt;stop offset="0%" stop-color="#ffffff" stop-opacity="0"/&gt;
      &lt;stop offset="100%" stop-color="#ff0000" stop-opacity="1"/&gt;
    &lt;/linearGradient&gt;
    &lt;rect x="0" y="0" width="1" height="1" fill="url(#grad-ucgg-generated)" /&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>Note: the <code>width="100%" height="100%"</code> I'd like to take this gradient and rotate it by, say <code>65deg</code> 
  The HTML5 canvas API provides a great way for me to build this image and then use <code>.toDataURL()</code> PNG to polyfill IE8 and IE7, but I'd like something scalable for IE9. </p>
  
  <p>So the goal is to replicate this:</p>
  
  <pre><code>background: linear-gradient(bottom, rgba(239, 239, 214,0) 0%, rgba(239, 239, 214,.8) 100%),
  linear-gradient(left,  rgba(239, 239, 214,0) 60%,rgba(207, 223, 144,1) 100%),
  linear-gradient(right, rgba(239, 239, 214,0) 0%,rgba(239, 239, 214,1) 60%),
  linear-gradient(top, rgba(239, 239, 214,0) 60%,#cfdf90 100%);
  }
  </code></pre>
  
  <p>with an <code>image/svg+xml</code> that's 100% width and height.</p>
  
  <p>I did try out <a href="http://svg-edit.googlecode.com" rel="noreferrer">http://svg-edit.googlecode.com</a> but the interface was less than intuitive for the types of editing I wanted to do.
  Thanks!</p>