chromium/third_party/blink/web_tests/svg/as-background-image/resources/svg-as-background-with-relative-size.svg

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<radialGradient id="gradient1" cx="0" cy="80" r="280" fx="150" fy="80" gradientUnits="userSpaceOnUse">
    <stop offset=".00" style="stop-color:#441155"/>
    <stop offset=".13" style="stop-color:#442266"/>
    <stop offset=".15" style="stop-color:#5599bb"/>
    <stop offset="0.25" style="stop-color:#ffffff"/>
    <stop offset="0.7" style="stop-color:#ffddcc"/>
    <stop offset="1" style="stop-color:#ffaaaa"/>
</radialGradient>

<g style="fill:url(#gradient1)" stroke-width="2" stroke="salmon" transform="translate(100,20) scale(0.4)">
    <ellipse transform="translate(100 200) rotate(20)" rx="250" ry="150"/>
    <ellipse transform="translate(600 200) rotate(-30)" rx="250" ry="150"/>
    <ellipse transform="translate(100 500) rotate(-30)" rx="250" ry="150"/>
    <ellipse transform="translate(600 500) rotate(10)" rx="250" ry="150"/>
</g>
</svg>