<svg xmlns="http://www.w3.org/2000/svg" width="300" height="400">

<defs>
<!-- tests if WebKit uses the percentage values, if gradientUnits is userSpaceOnUse-->
<linearGradient id="gradient1" x1="0%" y1="0%" x2="50%" y2="0%" gradientUnits="userSpaceOnUse">
    <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
    <stop offset="100%" style="stop-color:rgb(0,255,0);stop-opacity:1"/>
</linearGradient>
<linearGradient id="gradient2" x1="0" y1="0" x2="150" y2="0" gradientUnits="userSpaceOnUse">
    <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
    <stop offset="100%" style="stop-color:rgb(0,255,0);stop-opacity:1"/>
</linearGradient>
<radialGradient id="gradient3" cx="50%" cy="66%" r="80%" gradientUnits="userSpaceOnUse">
    <stop offset="0%" style="stop-color:rgb(0,255,0);stop-opacity:1"/>
    <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
</radialGradient>
</defs>

<rect x="0" y="0" width="300" height="50" fill="url(#gradient1)"/>
<rect x="0" y="50" width="300" height="50" fill="url(#gradient2)"/>
<rect x="0" y="100" width="300" height="300" fill="url(#gradient3)"/>
</svg>