One possibility is to use userSpace units for your gradients like so:
<svg height="400px" width="800px" viewBox="0 0 800 400" >
<defs>
<linearGradient id="grad1" x1="0" y1="0" x2="800" y2="400" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="800" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<rect x="0" y="0" width="800" height="400" fill="url(#grad1)"/>
<ellipse cx="200" cy="100" rx="85" ry="55" stroke-width = "10" stroke="blue" fill="url(#grad1)" />
<ellipse cx="400" cy="300" rx="85" ry="55" stroke-width = "10" stroke="blue" fill="url(#grad1)" />
</svg>