I add below svg component into my html file. It's size fit my tablet well, however it is too large for my smartphone. How can we automatically scale the svg's size to fit different screen?
<svg viewBox="310 -25 380 450" width="660" height="450">
<!-- dashline horizental -->
<line x1="200" y1="0" x2="800" y2="0" style="stroke:black;stroke-width:0.2;stroke-dasharray:2" />
<text x="175" y="0" class="small">20</text>
<line x1="200" y1="50" x2="800" y2="50" style="stroke:black;stroke-width:0.2;stroke-dasharray:2" />
<text x="175" y="50" class="small">15</text>
<line x1="200" y1="100" x2="800" y2="100" style="stroke:black;stroke-width:0.2;stroke-dasharray:2" />
<text x="175" y="100" class="small">10</text>
<line x1="200" y1="150" x2="800" y2="150" style="stroke:black;stroke-width:0.2;stroke-dasharray:2" />
<text x="175" y="150" class="small">5</text>
<line x1="200" y1="200" x2="800" y2="200" style="stroke:black;stroke-width:0.5;stroke-dasharray:2" />
<text x="175" y="200" class="small">0</text>
<line x1="200" y1="250" x2="800" y2="250" style="stroke:black;stroke-width:0.2;stroke-dasharray:2" />
<text x="175" y="250" class="small">5</text>
<line x1="200" y1="300" x2="800" y2="300" style="stroke:black;stroke-width:0.2;stroke-dasharray:2" />
<text x="175" y="300" class="small">10</text>
<line x1="200" y1="350" x2="800" y2="350" style="stroke:black;stroke-width:0.2;stroke-dasharray:2" />
<text x="175" y="350" class="small">15</text>
<line x1="200" y1="400" x2="800" y2="400" style="stroke:black;stroke-width:0.2;stroke-dasharray:2" />
<text x="175" y="400" class="small">20</text>
<!-- dashline vertical -->
<line x1="200" y1="0" x2="200" y2="400" style="stroke:black;stroke-width:0.2;stroke-dasharray:2" />
<text x="195" y="415" class="small">0</text>
<line x1="250" y1="0" x2="250" y2="400" style="stroke:black;stroke-width:0.2;stroke-dasharray:2" />
<text x="245" y="415" class="small">5</text>
<line x1="300" y1="0" x2="300" y2="400" style="stroke:black;stroke-width:0.2;stroke-dasharray:2" />
<text x="295" y="415" class="small">10</text>
<line x1="350" y1="0" x2="350" y2="400" style="stroke:black;stroke-width:0.2;stroke-dasharray:2" />
<text x="345" y="415" class="small">15</text>
<line x1="400" y1="0" x2="400" y2="400" style="stroke:black;stroke-width:0.2;stroke-dasharray:2" />
<text x="395" y="415" class="small">20</text>
<line x1="450" y1="0" x2="450" y2="400" style="stroke:black;stroke-width:0.2;stroke-dasharray:2" />
<text x="445" y="415" class="small">25</text>
<line x1="500" y1="0" x2="500" y2="400" style="stroke:black;stroke-width:0.2;stroke-dasharray:2" />
<text x="495" y="415" class="small">30</text>
<line x1="550" y1="0" x2="550" y2="400" style="stroke:black;stroke-width:0.2;stroke-dasharray:2" />
<text x="545" y="415" class="small">35</text>
<line x1="600" y1="0" x2="600" y2="400" style="stroke:black;stroke-width:0.2;stroke-dasharray:2" />
<text x="595" y="415" class="small">40</text>
<line x1="650" y1="0" x2="650" y2="400" style="stroke:black;stroke-width:0.2;stroke-dasharray:2" />
<text x="645" y="415" class="small">45</text>
<line x1="700" y1="0" x2="700" y2="400" style="stroke:black;stroke-width:0.2;stroke-dasharray:2" />
<text x="695" y="415" class="small">50</text>
<line x1="750" y1="0" x2="750" y2="400" style="stroke:black;stroke-width:0.2;stroke-dasharray:2" />
<text x="745" y="415" class="small">55</text>
<line x1="800" y1="0" x2="800" y2="400" style="stroke:black;stroke-width:0.2;stroke-dasharray:2" />
<text x="795" y="415" class="small">60</text>
<!-- dashline for angle 30, 60-->
<line x1="200" y1="200" x2="546.41" y2="0" style="stroke:black;stroke-width:0.5;stroke-dasharray:2"/>
<line x1="200" y1="200" x2="546.41" y2="400" style="stroke:black;stroke-width:0.5;stroke-dasharray:2"/>
<line x1="200" y1="200" x2="315.47" y2="0" style="stroke:black;stroke-width:0.5;stroke-dasharray:2"/>
<line x1="200" y1="200" x2="315.47" y2="400" style="stroke:black;stroke-width:0.5;stroke-dasharray:2"/>
</svg>