Scale uniform on X axis

I dynamically generate an svg, which can result in a very high height value. (It's a table.) My aim is to have:

1. ratio on x axis
2. scrollbar to scroll the image down

I know I have to play with svg's height and width, viewBox and preserveAspectRatio, but to achieve my goal I'm using a dirty trick which leaves a lot of white space at the bottom: I set the height of the image to a very high value.

The problem is that I have no certainty that the table (image) will never exceed this value (and I don't want to end up setting it to something like 100000).

Can anybody help me?

Here's the example I'm working on to find a solution:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="100%"
height="2000"
viewBox="0 0 1366 768"
preserveAspectRatio="xMinYMin meet">

<rect
   width="1359.5181开发者_开发技巧"
   height="42.065403"
   x="3"
   y="3"
   id="rect2985"
  style="fill:#ffff78;stroke:#000000;stroke-width:10" />
<rect
   width="719.58691"
   height="805.50775"
   x="316.83304"
   y="177.29433"
   id="rect2987"
   style="fill:#ffff78;stroke:#000000;stroke-width:10" />
<text
   x="15"
   y="30"
   id="text2989"
   style="font-size:23px">LOL</text>
</svg>

Yeah, I guess I should.

I'll use this for now (still gotta be fully tested):

function fixHeight()
{
node = document.getElementById("table");
 node.setAttribute("height", node.getBBox().width);
}