Make svg responsive on mobile monitor - html

Question

I am trying to make an svg with 4 ellipses inside, which overlap. It works fine but it doesn't seem to respond well when the size of the screen becomes to small. What should I do to make it responsive?
This is my current snippet for the svg elements:
<div class="row">
<div class="col-md-12">
<svg height="220" width="100%">
<defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255);
stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
</radialGradient>
</defs>
<ellipse cx="125" cy="110" rx="95" ry="85" fill="url(#grad1)" />
<defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255);
stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
</radialGradient>
</defs>
<ellipse cx="300" cy="110" rx="95" ry="85" fill="url(#grad1)" />
<defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255);
stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
</radialGradient>
</defs>
<ellipse cx="475" cy="110" rx="95" ry="85" fill="url(#grad1)" />
<defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255);
stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
</radialGradient>
</defs>
<ellipse cx="650" cy="110" rx="95" ry="85" fill="url(#grad1)" />
</div>
</div>
This is how it looks on normal monitor
and this on mobile screen:

Answer 1

If you want the SVG to scale to the size of its parent container, then you need to tell the browser how big the SVG contents are, so it knows how much it needs to scale the SVG to fit the space available.
The way you do that is with the viewBox attribute. The viewBox value consists of four numbers:
<left X> <top Y> <width> <height>
Your four ellipses occupy the area from 30,25 (top left of first ellipse) to 745,195 (bottom right of last ellipse). So you should set the viewBox to:
viewBox="30 25 715 170"
When you do that, the SVG will scale.
<div class="row">
<div class="col-md-12">
<svg height="220" width="100%" viewBox="30 25 715 170">
<defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255);
stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
</radialGradient>
</defs>
<ellipse cx="125" cy="110" rx="95" ry="85" fill="url(#grad1)" />
<defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255);
stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
</radialGradient>
</defs>
<ellipse cx="300" cy="110" rx="95" ry="85" fill="url(#grad1)" />
<defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255);
stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
</radialGradient>
</defs>
<ellipse cx="475" cy="110" rx="95" ry="85" fill="url(#grad1)" />
<defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255);
stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
</radialGradient>
</defs>
<ellipse cx="650" cy="110" rx="95" ry="85" fill="url(#grad1)" />
</svg>
</div>
</div>