<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="gradient1f" y2="100" xlink:href="#gradient1e"/>
<linearGradient id="gradient1e" x1="0" xlink:href="#gradient1d"/>
<linearGradient id="gradient1d" y1="100" xlink:href="#gradient1c"/>
<radialGradient id="gradient1c" xlink:href="#gradient1b">
<stop offset="0" stop-color="red"/>
<stop offset="1" stop-color="blue"/>
</radialGradient>
<linearGradient id="gradient1b" x2="100" xlink:href="#gradient1a"/>
<linearGradient id="gradient1a" gradientUnits="userSpaceOnUse"/>
<linearGradient id="gradient1" xlink:href="#gradient1f"/>
<linearGradient id="gradient2" gradientUnits="userSpaceOnUse" x1="0" y1="100" x2="100" y2="100">
<stop offset="0" stop-color="red"/>
<stop offset="1" stop-color="blue"/>
</linearGradient>
</defs>
<rect transform="translate(50,10)" fill="url(#gradient1)" width="100px" height="100px"/>
<rect transform="translate(200,10)" fill="url(#gradient2)" width="100px" height="100px"/>
<text x="10" y="150">The above two squares should be blue-red gradients and look identical</text>
</svg>