Home/ Questions/Q 7176343
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T16:29:16+00:00

I’ve seen a few questions dancing around this, so I hope this isn’t too

  • 0

I’ve seen a few questions dancing around this, so I hope this isn’t too redundant. Ideally, I’d like an image/svg+xml which scales to 100% of it’s container.
Colorzilla gets me a great start with a data: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>

Note: the width="100%" height="100%" I’d like to take this gradient and rotate it by, say 65deg
The HTML5 canvas API provides a great way for me to build this image and then use .toDataURL() PNG to polyfill IE8 and IE7, but I’d like something scalable for IE9.

So the goal is to replicate this:

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

with an image/svg+xml that’s 100% width and height.

I did try out http://svg-edit.googlecode.com but the interface was less than intuitive for the types of editing I wanted to do.
Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    To rotate the gradient you can e.g use the ‘gradientTransform’ attribute, like this:

    <?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%" gradientTransform="rotate(65)">
    <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>
    • 0