title: Resizing path-based SVG to fit the screen
body: <p>I have the height and width of the <code>svg</code>. I looked at <a href="https://stackoverflow.com/questions/45930593/how-to-scale-svg-path-to-fit-the-window-size">How to scale SVG path  to fit the window size</a>, which helps but is still not perfect. The svg is overflowing the screen. I would like it to be centered and not extend past the viewport. Here is my css:</p>
  
  <pre><code>svg {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      overflow: visible;      
  }
  </code></pre>
  
  <p>The svg, with a height and width of 400 and 300, looks like:</p>
  
  <pre><code>&lt;svg viewBox="0 0 400 300" preserveAspectRatio="xMidYMid meet"&gt;
      &lt;path d="m..."&gt;&lt;/path&gt;
      &lt;path d="m..."&gt;&lt;/path&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>I'm setting the viewbox x and y to the height and width of the svg, and the <code>svg</code> is in an outer <code>relative</code> container. I would like it not to extend past the bounds of the outer container. Any help is appreciated, thank you.</p>