title: Place square svg to the center of the screen, scale it to fit the screen's width and height with some constraints
body: <p>It seem to be a silly question and possibly a dupe, but I couldn't find a good solution for a while, so finally dare to ask.</p>
  
  <p>I want to place an <code>&lt;svg&gt;</code> element inside an html document and satisfy the following requirements:</p>
  
  <ol>
  <li>Image is placed as an <code>&lt;svg&gt;</code> html5 element, not an external svg-file. (Actually, I want to dynamically generate it with D3.js.)</li>
  <li>Image is placed in the center of the screen, both vertically and horizontally.</li>
  <li>Actual size of the image should not exceed some predefined value (like <code>15cm × 15cm</code>).</li>
  <li>If either current screen's width or height is less then <code>15cm</code>, image should be scaled (preserving aspect ratio) in such a way it fit to screen. No parts of the image should be clipped. Image should be placed in the center.</li>
  </ol>
  
  <p>It's basically the same requirements as described in <a href="https://codepen.io/tigt/post/scaling-inline-svg-css-and-other-sadnesses" rel="noreferrer">this article</a>. It says that I should use <code>preserveAspectRatio="xMidYMid"</code>, but gives no example on how to do it and how does it correspond to other tricks described in the article. <a href="http://unmatchedstyle.com/news/svg-and-the-preserveaspectratio-property.php" rel="noreferrer">This article</a> suggests <code>preserveAspectRatio="xMidYMid meet"</code>, but again I wasn't able to reproduce the examples provided there to meet all my requirements.</p>
  
  <p>My current code is like this but it does not fit in height and does not center vertically.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.svg-container {
    height:100%;
    width:100%;
    max-height:15cm;
    max-width:15cm;
    margin: 0 auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="svg-container"&gt;  
  &lt;svg id="picture" preserveAspectRatio="xMidYMid meet" viewBox="0 0 100 100"&gt;
    &lt;circle cx=50 cy=50 r=50&gt;&lt;/circle&gt;
  &lt;/svg&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>