title: Center SVG Object on responsive canvas
body: <p>The SVG canvas is configured to adjust to the browser window and always fill 100% horizontally and vertically.
  I want the blue cube to always be in the <strong>bottom center</strong> of the window and also stay the same size. </p>
  
  <p>Is there any way to change the position of the cube or the viewBox, so that the cube always stays in the bottom center no matter what size the browser window has?</p>
  
  <p>Thank you in advance for your help.</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-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;           
    &lt;style type="text/css" media="screen"&gt;
      body { background:#eee; margin:0 }
      svg {display:block; position:absolute; width:100%; height:100%; background:#fff;}
    &lt;/style&gt;
  &lt;/head&gt;
          
  &lt;body&gt;
    &lt;svg xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%"&gt;
      &lt;rect x="0" y="0" width="100%" height="100%" fill="lightgreen"/&gt; &lt;!--Background--&gt; 
      &lt;rect x="0" y="0" width="100" height="100" fill="blue"/&gt; &lt;!--Cube--&gt;
    &lt;/svg&gt;       
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>