Tips for adjusting an svg component to suit various screen sizes

I inserted the following SVG component into my HTML file. It fits perfectly on my tablet, but it's too large for my smartphone. How can we automatically adjust the size of the SVG to fit different screens?

<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>
javascripthtmlcssionic3

Answer №1

To achieve this, utilizing the attributes max-height and max-width is recommended.

body {
  margin: 0;
}

svg {
  max-height: 100vh;
  max-width: 100vw;
  width: 100%;
  height: 100%;
}
<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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Struggling to set a background image for multiple div elements

Hey everyone! I'm working on a small school project website and I've run into an issue with the background on multiple div elements. Here's my HTML code snippet: <div class="bloc-1-text"> <h3> </h3&g ...

htmlcss

Maintaining uniformity in Python by assigning and populating empty values for any missing HTML tags to ensure consistency across structures

Here are the HTML lines I currently have: <nonDerivativeTable> <nonDerivativeHolding> # First Holding <securityTitle> <value>Common Stock</value> </securityTitle> <ownershipNat ...

pythonhtml

A conflict with the Ajax file is causing an automatic logout

In my Rails application, there is a page with a table that uses partial AJAX to increase the capacity attribute in a time entity. You can view the visual representation of the table here. By clicking the plus/minus button, the capacity attribute increases ...

javascriptjqueryajaxruby-on-rails-3csrf

Steps for refreshing Google reCAPTCHA on an AJAX-enabled webpage

I am encountering an issue with two captchas on my website. One captcha is loaded upon refresh, while the second captcha is loaded on a different page via ajax. The problem arises when I click on the "No" button after selecting it on the second page. I wan ...

javascriptjqueryajaxrecaptcha

Preserve the div's aspect ratio using CSS styling

Is there a way to design a flexible div element that adjusts its width and height in sync with the window's size changes? Do any CSS techniques exist that would allow the height of the div to adapt based on the width, while still preserving its aspec ...

htmlcssresponsive-designaspect-ratio

Having trouble with setting up the next image configuration for graphcms' images

I've been using graphcms solely for my image assets and trying to integrate them into my Next JS (v12.0.1) frontend. However, I keep getting the error message hostname not configured in next.config.js, even though I have already specified it in my nex ...

javascriptreactjsgraphqlnext.jsapollo-client

Display the default child of vue-router 4

Need Assistance with Rendering Default Child View in Vue I am currently facing an issue with rendering the default child view for the Category view. I have come across a similar problem discussed on Stack Overflow, but it seems to be related to VUE2 and o ...

javascriptvue.jsvue-routervuejs3

What is the purpose of using an open quote and bracket in the `eval('('+jsonString+')')` syntax for parsing a JSON string?

What is the rationale behind this particular syntax structure? eval('(' + jsonString+ ')') When it comes to parsing JSON text, Crockford explains that "The text must be wrapped in parentheses to prevent any confusion with JavaScript& ...

javascriptjsoneval

What steps can be taken to seek assistance for a specific function within a module while using the REPL in node.js?

Seeking Documentation in the form of Man pages for a function within a module in node.js using REPL. When using Console.dir(modObj), all the methods and properties associated with a module are listed. However, I am unable to locate any manual or help docu ...

javascriptnode.jsnpm

fade in and out twice (for beginners)

Jquery <script> //Code snippet $(document).ready(function(){ $(".team").click(function(){ $(".panel").fadeToggle("3000"); }); $(".team").click(function(){ $(".teamh").fadeToggle("3000"); }); }); </script> HTM ...

javascriptjqueryhtmlcss

How do I retrieve distinct values from Math.random in JavaScript and prevent them from repeating?

I am attempting to fetch HTML dom elements remotely from a website using jquery/javascript. These elements are stored in an array and are unique, however, when I attempt to display them by generating random indexes with math.random() * my array.length, I n ...

javascriptarraysunique

Extending fabric.js toObject with custom properties can result in the loss of default properties

After doing extensive research on various platforms, including this one, I am still struggling to get everything working as desired. My main goal is to save custom properties in all shapes, specifically the uuid and rt_attributes. Following the manual, I ...

javascriptjsonfabricjs

What could be causing the Material UI tabs to malfunction when dynamically populating the content using a .map function instead of manually inserting it?

I was able to successfully integrate Material UI's tabs by manually adding content, but when I attempted to use a .map function to populate the content from a JSON data source, it stopped working. Can someone help me figure out why? The only change I ...

javascriptreactjsmaterial-uistatearray.prototype.map

Focus event in IE does not always work as expected after an ajax request is

Our current focus is on supporting IE8 exclusively. An ajax call retrieves data from the server, replaces the HTML in a container div with the response, and then attempts to focus on an element within the response. However, there seems to be inconsistenci ...

javascriptjqueryajaxinternet-explorer-8dom-manipulation

Unraveling the Mysteries of Node.js Application Logging

We've been having smooth sailing with our Kube cluster on AWS, but there seems to be a recurring issue with our Node app crashing and generating repetitive logs from our instances... I've scoured the internet for solutions but haven't had m ...

javascriptnode.js

Removing elements in AngularJS using ngRepeat

Many have questioned how to implement item removal within the ngRepeat directive. Through my research, I discovered that it involves using ngClick to trigger a removal function with the item's $index. However, I haven't been able to find an exam ...

javascriptangularjsangularjs-directiveangularjs-scope

Can coveralls/codecov be utilized on a local machine?

As per Coveralls public documentation found at , it is stated that "Your code must be hosted on GitHub, BitBucket, or GitLab". Furthermore, the npm package called "coveralls" available at https://www.npmjs.com/package/coveralls mentions that "This script ...

javascriptnode.jsnpmcoverallscodecov

Material User Interface, MUI, Modal, Back to Top Scroll按钮

After spending some time experimenting with scrollTop and the Dialog component (a fullscreen fixed modal) from Material-ui, I found that I couldn't quite get scrollTop to function properly. Whenever I clicked the "go down" button, it would either retu ...

javascriptcssreactjsmaterial-ui

Increasing the level of CSS list counters

HTML <ol> <li>item1 <ol> <li>item2</li> </ol> </li> <li>item1 <ol> <li>item2</li> <li>item3</li> </ol> </li> </ol> SC ...

htmlcsscss-counter

Volkswagen elements spilling over

Why are two divs overlapping each other? I have divided the two divs equally with viewport width. When I set the width to 49% instead of 50%, the code works fine. Why is that? <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

htmlcss