Как получить повернутый линейный градиент svg для использования в качестве фонового изображения?

Я видел несколько вопросов, танцующих вокруг этого, поэтому я надеюсь, что это не будет слишком избыточным. В идеале, я бы хотел image/svg+xml, который масштабируется до 100% своего контейнера. Colorzilla дает мне отличное начало с data:image/svg+xml

Примечание: width="100%" height="100%" Я бы хотел взять этот градиент и повернуть его, скажем, на 65deg. HTML5 canvas API предоставляет мне отличный способ создать это изображение и затем использовать .toDataURL() PNG для полифилла IE8 и IE7, но я хотел бы что-то масштабируемое для IE9.

Итак, цель - повторить это:

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

с image/svg+xml, который имеет 100% ширину и высоту.

Я пробовал http://svg-edit.googlecode.com, но интерфейс был менее интуитивным для тех типов редактирования, которые я хотел сделать. Спасибо!