I'm quite new to coding and I've designed a "minimalist" page as a practice project using figma and decided that all lines would only be 1.5px in weight (I just approximated based on the icons). You can see it here (still a work in progress): /

Now my problem is that when I started coding the page, I noticed that the lines were so thin that it renders weirdly. From what I can infer it's rounding the weight displayed depending on how zoomed it is or its position. The problem is that each line does not "round" the same way for a specific zoom setting so it appears uneven. The SVGs used do not behave this way and scale smoothly. From what I've gathered SVGs and the lines from borders or div elements render differently.

A simplified example can be shown with the code below, you can see the problem when you zoom in and out.

.horizontal {
  width: 100px;
  /* Adjust as needed */
  height: 1.5px;
  background-color: black;
}

.vertical {
  width: 1.5px;
  height: 100px;
  /* Adjust as needed */
  background-color: black;
}

.box {
  width: 100px;
  height: 100px;
  border: 1.5px solid black;
}

<h3>CSS Divs</h3>
<div class="horizontal"></div>
<br>
<div class="vertical"></div>
<br>
<div class="box"></div>

<h3>SVG Versions</h3>

<!-- SVG Horizontal Line -->
<svg width="100" height="2">
        <line x1="0" y1="1" x2="100" y2="1" stroke="black" stroke-width="1.5"/>
    </svg>

<br>

<!-- SVG Vertical Line -->
<svg width="2" height="100">
        <line x1="1" y1="0" x2="1" y2="100" stroke="black" stroke-width="1.5"/>
    </svg>

<br>

<!-- SVG Box -->
<svg width="102" height="102">
        <rect x="0.75" y="0.75" width="100.5" height="100.5" stroke="black" stroke-width="1.5" fill="none"/>
    </svg>