How to setup SVG's viewbox, width and height which is scalable and responsive

I am new to SVG design. Struggling to scale, zoom in/out with container and make it responsive to all the devices.

Is it even possible to design SVG in a way that fits in all the devices and handles browsing zoom in/out functionality?

I have tried to play with viewport and viewbox for each breakpoint.

e.g. for Desktop, I have SVG to fit in a container. should scale and zoom in and out with the container(svgClass).

.svgClass {
 background-image: url('assets/svg/desktop-svg.svg');
 width: "100%";
 height: 800px;
 position: absolute;
}

<div class="svgClass"></div>

Sample SVG

---desktop-svg.svg---

<svg width="1400" height="800" viewbox="0 0 1121 641">
-----
</svg>

It fits well with 100% browser zoom, but if in case of zoom in and zoom out SVG gets displaced.

To handle zoom in, I have increased viewport height="1400" and width="800" compared to viewbox (0 0 1121 641). which worked fine but zoom out still fails.

How to design SVG which can scale with the container and stay responsive, second do we need to setup viewport and viewbox for each device?