title: How to scale SVG image to fill browser window?
body: <p>This seems like it ought to be easy, but I'm just not getting something.</p>
  
  <p>I want to make an HTML page containing a single SVG image that automatically scales to fit the browser window, without any scrolling and while preserving its aspect ratio.</p>
  
  <p>For example, at the moment I have a 1024x768 SVG image; if the browser viewport is 1980x1000 then I want the image to display at 1333x1000 (fill vertically, centred horizontally).  If the browser was 800x1000 then I want it to display at 800x600 (fill horizontally, centred vertically).</p>
  
  <p>Currently I have it defined like so:</p>
  
  <pre><code>&lt;body style="height: 100%"&gt;
    &lt;div id="content" style="width: 100%; height: 100%"&gt;
      &lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1"
           width="100%" height="100%"
           viewBox="0 0 1024 768"
           preserveAspectRatio="xMidYMid meet"&gt;
        ...
      &lt;/svg&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>However this is scaling up to the full width of the browser (for a wide but short window) and producing vertical scrolling, which isn't what I want.</p>
  
  <p>What am I missing?</p>