He visto algunas preguntas bailando sobre esto, así que espero que esto no sea demasiado redundante. Idealmente, me gustaría unaimage/svg+xml que escala al 100% de su contenedor. @ Colorzilla me da un buen comienzo con unadata:image/svg+xml

<?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
  <linearGradient id="grad-ucgg-generated" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" stop-color="#ffffff" stop-opacity="0"/>
    <stop offset="100%" stop-color="#ff0000" stop-opacity="1"/>
  </linearGradient>
  <rect x="0" y="0" width="1" height="1" fill="url(#grad-ucgg-generated)" />
</svg>

Nota lawidth="100%" height="100%" Me gustaría tomar este gradiente y rotarlo, digamos65deg La API HTML5 Canvas me proporciona una excelente manera de crear esta imagen y luego usar.toDataURL() PNG para polyfill IE8 e IE7, pero me gustaría algo escalable para IE9.

Así que el objetivo es replicar esto:

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%);
}

con unimage/svg+xml eso es 100% de ancho y alto.

Probéhttp: //svg-edit.googlecode.co pero la interfaz era menos que intuitiva para los tipos de edición que quería hacer. ¡Gracias