viewPort / viewBox problem for my embedded webServer application

Question

I think I need some help with using the viewPort and viewBox concept which is new to me, in HTML, Javascript and CSS, (without extra libraries, if possible, because I need a small footprint for my ESP8266 Webserver). What I am trying to achieve is to manipulate an svg image, schematic diagram created with EasyEDA, and zoom in / out and moving and clipping at the borders of that area. Until now, after having studied many documents on the web as well as youTube videos I am still not able to do what I described above, I don't know exactly where to put the viewBox and/or viewPort instructions to make it happen. For completness I uploaded the complete code and the svg, but it is only a small portion of it where this diagram is being used. At this moment the three parts are being displayed beneath each other on a dialog instead of whitin each other, have no clue why, so some help would be appreciated.

// The JavaScript code - MainPage only

const Version = "My Schematic Version R01";

// Javascript Main Page & SideNav

// Perform Send from WebPage to ESP8266 - Menu - ResetAll Click
function ResetAll() {}

// Perform Send from WebPage to ESP8266 - Menu - ResetWiFi Click
function ResetWifi() {}

// Perform Send from WebPage to ESP8266 - Menu - ClearRV Click
function ClearRV() {}

// Perform Send from WebPage to ESP8266 - Menu - ClearCI Click
function ClearCI() {}

// Perform Send from WebPage to ESP8266 - Menu - ClearAll Click
function ClearAll() {}

// Perform Send from WebPage to ESP8266 - Menu - About & Help Click
function AboutOpen() {
  // Open het Venster in Modal Mode
  document.getElementById("myAboutDialog").showModal();
  // Plaats de Scrollbar aan het begin van het Venster
  document.getElementById("myAboutDialog").scrollTo(0, 0);
}

function AboutClose() {
  // Sluit het Modal Venster
  document.getElementById("myAboutDialog").close();
}

function Startup() {
  document.getElementById("Vers_Info").innerHTML = Version;
}

// The JavaScript code - Manipulation of the Schematic Diagram
const svgImage = document.getElementById("svgImage");
const svgContainer = document.getElementById("svgContainer");

console.log(svgImage.clientWidth);
console.log(svgImage.clientHeight);

var viewBox = { x: 0, y: 0, w: svgImage.clientWidth, h: svgImage.clientHeight };
svgImage.setAttribute("viewBox", `${viewBox.x} ${viewBox.y} ${viewBox.w} ${viewBox.h}`);
const svgSize = { w: svgImage.clientWidth, h: svgImage.clientHeight };
var isPanning = false;
var startPoint = { x: 0, y: 0 };
var endPoint = { x: 0, y: 0 };
var scale = 1;

svgContainer.onmousewheel = function (e) {
  e.preventDefault();
  var w = viewBox.w;
  var h = viewBox.h;
  var mx = e.offsetX; // mouse x
  var my = e.offsetY; // mouse y
  var dw = w * Math.sign(e.deltaY) * 0.05;
  var dh = h * Math.sign(e.deltaY) * 0.05;
  var dx = (dw * mx) / svgSize.w;
  var dy = (dh * my) / svgSize.h;
  viewBox = { x: viewBox.x + dx, y: viewBox.y + dy, w: viewBox.w - dw, h: viewBox.h - dh };
  scale = svgSize.w / viewBox.w;
  zoomValue.innerText = `${Math.round(scale * 100) / 100}`;
  svgImage.setAttribute("viewBox", `${viewBox.x} ${viewBox.y} ${viewBox.w} ${viewBox.h}`);

  console.log(viewBox.x);
  console.log(viewBox.y);
  console.log(viewBox.w);
  console.log(viewBox.h);
};

svgContainer.onmousedown = function (e) {
  isPanning = true;
  startPoint = { x: e.x, y: e.y };

  console.log(e.x);
  console.log(e.x);
};

svgContainer.onmousemove = function (e) {
  if (isPanning) {
    endPoint = { x: e.x, y: e.y };
    var dx = (startPoint.x - endPoint.x) / scale;
    var dy = (startPoint.y - endPoint.y) / scale;
    var movedViewBox = { x: viewBox.x + dx, y: viewBox.y + dy, w: viewBox.w, h: viewBox.h };
    svgImage.setAttribute("viewBox", `${movedViewBox.x} ${movedViewBox.y} ${movedViewBox.w} ${movedViewBox.h}`);

    console.log(movedViewBox.x);
    console.log(movedViewBox.y);
    console.log(movedViewBox.w);
    console.log(movedViewBox.h);
  }
};

svgContainer.onmouseup = function (e) {
  if (isPanning) {
    endPoint = { x: e.x, y: e.y };
    var dx = (startPoint.x - endPoint.x) / scale;
    var dy = (startPoint.y - endPoint.y) / scale;
    viewBox = { x: viewBox.x + dx, y: viewBox.y + dy, w: viewBox.w, h: viewBox.h };
    svgImage.setAttribute("viewBox", `${viewBox.x} ${viewBox.y} ${viewBox.w} ${viewBox.h}`);
    isPanning = false;

    console.log(viewBox.x);
    console.log(viewBox.y);
    console.log(viewBox.w);
    console.log(viewBox.h);
  }
};

svgContainer.onmouseleave = function (e) {
  isPanning = false;
};

/* Styles for first Page & Dialog */

/* Styles used in the Body */
body {
  text-align: center;
  top: 0;
  left: 0;
  min-width: 1000px;
  width: 1000px;
  height: 350px;
}

#btnSysInfo {
  bottom: 50%;
  background-color: #42d1f5;
  border: none;
  color: white;
  padding: 8px 8px;
  border-radius: 9px;
  text-decoration: none;
  font-size: 18px;
  margin: 2px;
  cursor: pointer;
  width: 90px;
  height: 55px;
  outline: auto;
  outline-color: black;
}

/* Uitschuif Menu */
#myMenu a {
  position: absolute;
  left: -240px;
  transition: 0.3s;
  padding: 8px;
  width: 275px;
  text-decoration: none;
  font-size: 18px;
  color: white;
  border-radius: 0 5px 5px 0;
  outline: auto;
  outline-color: black;
}

#myMenu a:hover {
  left: 0;
}

#ResetALL {
  top: 35px;
  background-color: #ff0202;
}

#ResetWiFi {
  top: 75px;
  background-color: #ff7b00;
}

#ClearDebugRV {
  top: 115px;
  background-color: #04aa6d;
}

#ClearDebugCI {
  top: 155px;
  background-color: #04aa6d;
}

#ClearDebugALL {
  top: 195px;
  background-color: #2196f3;
}

#About {
  top: 235px;
  background-color: #1500ff;
}

#myAboutDialog {
  position: relative;
  top: 0;
  left: 0;
  border-radius: 10px;
  background-color: white;
  max-width: 85%;
  max-height: 85%;
}

/* Close Dialog Button */
#AboutClose {
  background-color: #196f3d;
  border: none;
  color: white;
  padding: 8px 8px;
  border-radius: 9px;
  text-decoration: none;
  font-size: 18px;
  margin: 2px;
  cursor: pointer;
  width: 100%;      /* of the dialog width */
  height: 43px;
  outline: auto;
  outline-color: black;
}

#AboutClose:active {
  outline: 0;
  width: 113px;
  height: 46px;
}

#topRect {
  width: 97%;
  height: 25px;
  fill: rgb(252, 183, 57);
  stroke-width: 2;
  stroke: rgb(0, 0, 0);
}

#topRectTxt {
  fill: blue;
  font-weight: bold;
}

#botRect {
  width: 97%;
  height: 100%;
  fill: none;
  stroke-width: 2;
  stroke: rgb(0, 0, 0);
}

/* Extra Styles for Dialog Box */
.dialogBox {
  /* The area wherein to manipulate */
  border: 2px solid blue;
  width: 800px;
  height: 400px;
}

<!DOCTYPE html>
<html>
  <!-- Uncomment line below to use the 5 sec. refresh in the browser.. -->
  <!-- <meta http-equiv="refresh" content="5" /> -->

  <head>
    <!-- Tabblad Title in the browser -->
    <title>Scroll_Zoom_Pan_2</title>

    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta charset="utf-8" />

    <!-- !!!! REMARK Filenames are CASE-SENSITIVE !!!! -->
    <!-- Download the FavIcon File -->
    <link rel="icon" type="image/x-icon" href="favicon.ico" />

    <!-- Download the Stylesheet File -->
    <link rel="stylesheet" type="text/css" href="styles.css" />

    <!-- ! Don't load the Javascript File HERE ! -->

    <!-- ! Only Load, Don't Show the object NOW (Schematic Diagram) !!! -->
    <object id="svgImage" src="pict_2.svg" alt="Schematic" width="800" height="400">

  </head>

  <body onload="Startup()">
    <header>
      <h2>
        <title>Example code</title>
      </h2>
    </header>
    
    <!-- !!!! Prepare of the About & Help Dialog !!!! -->
    <dialog id="myAboutDialog" class="myAboutDialog">
      <h2>ESP8266 Monitoring Device © 2023</h2>
      
      <!-- Display the Website Versie Info (= const in the .js-file) -->
      <h4 id="Vers_Info"></h4> 
      
      <h3>About</h3>
      <p style="text-align: left;">Lorem Ipsum (afgekort: lipsum) is de benaming van een tekst die vaak door drukkers, zetters, grafisch ontwerpers en dergelijke gebruikt wordt om te kijken hoe een tekst of lettertype eruit ziet, bijvoorbeeld in letterproeven, op een webpagina of op een kaft van een boek. De standaardversie van het Lorem Ipsum stamt uit circa 1500 en begint als volgt:</p>
      <h3>Help</h3>
      <p style="text-align: left;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



      <!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
      <!-- !!!! Displaying and manipulating the Schematic diagram !!!! -->
      <!-- !!!!   ==> This is where the magic shoud happen <==    !!!! -->
      <!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
      <div>
        <span id="zoomValue">1</span>

        <svg width="100%" height="100%">
          <!-- The topRect with Text -->
          <rect id="topRect" class="topRect" />
          <text id="topRectTxt" class="topRectTxt" x="10" y="17">Mouse Click = Grab & Move Diagram</text>
          <text id="topRectTxt" class="topRectTxt" x="300" y="17">Mouse Scroll = Zoom IN / OUT</text>

          <!-- The botRect -->
          <rect id="botRect" class="botRect" />
          <br>

          <!-- botRect With ViewBox inside -->
          <div id="svgContainer" class="svgContainer" width="800" height="400" >
            <!-- viewBox="0 0 500 250" (for now) param 1 & 2 for panning (to display start position), param 3 & 4 for zooming in / out -->
            <svg class="dialogBox" preserveAspectRatio="none" viewBox="0 0 800 400">   
              <!-- the ViewBox with picture -->
              <img id="svgImage" class="svgImage" src="pict_2.svg" alt="Schematic" width="800" height="400" > 
            </svg>
          </div>

        </svg>
      </div>

      <!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
      <!-- !!!! Displaying and manipulating the Schematic diagram !!!! -->
      <!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->



      <h3>Explaining the Diagram</h3>
      <p style="text-align: left;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <br>
      <p><b>And lots of more text</b></p>
      <br>
      <br>
      <!-- Click OR Use the "Esc" button to close the Modal window -->
      <button class="AboutClose" id="AboutClose" onclick="AboutClose()">Close Dialog</button>
    </dialog> 

    <main>
      <!-- The HTML Main (Page) Menu [ESP8266 Monitoring Device] -->
      <div style="text-align: left">
        <table
          id="MainGenCnt_table"
          cellpadding="3"
          cellspacing="1"
          style="
            box-sizing: border-box;
            vertical-align: bottom;
            position: relative;
            display: inline-table;
            width: 1000px;
            height: 200px;
            min-width: 1000px;
            background: none;
            table-layout: fixed;
            border: 1px solid #8c8c8c;
          "
        >
          <tr>
            <!-- Bottom row - Debug windows -->
            <td
              width="50%"
              height="59px"
              style="text-align: center; vertical-align: top; overflow: hidden" >
              <!-- Bottom Left- 1 & 2 -->
              <table 
                width="100%"
                height="59px"
                style="text-align: center; vertical-align: top; overflow: hidden" >
                <tr>
                  <!-- Bottom Left- 1 -->
                  <td width="20%"
                    style="text-align: centre; vertical-align: top;">
                    <label
                      style="font-size: 20px; font-weight: 700; color: #ff00aa"
                      for="Deb_RV"
                      >
                      Menu
                    </label>
                    <div id="myMenu" class="sidenav" style="text-align: left">
                      <a id="ResetALL" onclick="ResetAll()">Reset ALL Boards</a>
                      <a id="ResetWiFi" onclick="ResetWifi()">ReConfig WiFi Setting</a>
                      <a id="ClearDebugRV" onclick="ClearRV()">Clear Debug Read Values</a>
                      <a id="ClearDebugCI" onclick="ClearCI()">Clear Debug CommandInfo</a>
                      <a id="ClearDebugALL" onclick="ClearAll()">Clear ALL Debug Windows</a>
                      <a id="About" onclick="AboutOpen()">About & Help</a>
                    </div>
                  </td>

                  <!-- Bottom Left- 2 -->
                  <td width="80%">
                    <label
                      style="font-size: 20px; font-weight: 700; color: #ff00aa"
                      for="Deb_RV"
                      >Debug Read & Write Values
                    </label
                    >
                    <textarea class="DebRV" id="DebRV" name="DebRV" cols="50" rows="15"></textarea> 
                  </td>
                </tr>
              </table>
            </td>

            <td
              width="50%"
              height="59px"
              style="text-align: center; vertical-align: top; overflow: hidden">
              <!-- Bottom Right- 3 & 4 -->
              <table 
                width="100%"
                height="59px"
                style="text-align: center; vertical-align: top; overflow: hidden" >
                <tr>
                  <!-- Bottom Right- 3 -->
                  <td width="80%">
                    <label
                      style="font-size: 20px; font-weight: 700; color: #ff00aa"
                      for="Deb_CI">Debug Command Info
                    </label>
                    <textarea class="DebCI" id="DebCI" name="DebCI" cols="50" rows="15"></textarea>
                  </td>

                  <!-- Bottom Right- 4 -->
                  <td width="20%"
                    style="text-align: centre; vertical-align: top;">
                    <table>
                      <tr
                        height="80%"
                        style="vertical-align: top; overflow: hidden">
                        <label
                          style="font-size: 20px; font-weight: 700; color: #ff00aa"
                          for="BattCap">BattCap
                        </label>
                        <br>
                        <br>
                        <br>
                        <br>
                        <label
                          style="font-size: 20px; font-weight: 700; color: #8000ff">
                          <span id="battcap"></span>
                        </label>
                        <br>
                        <br>
                        <br>
                        <br>
                        <br>
                        <hr>
                      </tr>
                      <tr                    
                        height="20%"
                        style="vertical-align: bottom; overflow: hidden">
                        <!-- Open the sys_info page in a new Tab Page of the same browser wundow -->
                        <form action="sys_info.html" method="get" target="_blank">
                          <button class="btnSysInfo" id="btnSysInfo">Systeem Info</button>
                        </form>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </div>
    </main>

    <footer>
      <!-- Display the Footer of the Web Page -->
    </footer>

  </body>
</html>

My "pict_2.svg" file (any File from easyEda or other will do) but my file was way to big..sorry for that)

Perhaps a screenshot shows what is happening :

I tried everything I could think of, some with more result than the others, but none giving me the results as described above...