title: How to position my svg image to the center of browser
body: <p>I generated a simple svg image and loaded it to Chrome. Meant to position it to the center of browser(even when the browser resizing), but so far have failed on this.  </p>
  
  <p>Have referred to some articles about viewport/viewbox setting, and some Q&amp;As on this site(<a href="https://stackoverflow.com/questions/8639383/how-do-i-center-an-svg-in-a-div;https://stackoverflow.com/questions/13373169/align-svg-to-center-of-screen">https://stackoverflow.com/questions/8639383/how-do-i-center-an-svg-in-a-div;https://stackoverflow.com/questions/13373169/align-svg-to-center-of-screen</a>), but haven't got it done. Maybe I missed something, since I am very new to this.</p>
  
  <p>Here is the full code for this svg image:</p>
  
  <pre><code>&lt;svg
     xmlns="http://www.w3.org/2000/svg"
     xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
     width="100%"
     height="100%"
     viewBox="0 -700 1080 1920"
     preserveAspectRatio="xMidYMid meet"
     version="1.1"
     id="mysvg"
  &gt;
    &lt;g
      id="group" &gt;
        &lt;circle
         r="500"
         style="fill:#ffb721;fill-opacity:1"
         cy="0"
         cx="0"
         id="path" /&gt;
  
         &lt;circle
         style="fill:#f71c17;fill-opacity:1;"
         id="path2"
         cx="0"
         cy="0"
         r="250" /&gt;
     &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>I expect this image could stay at the center of the browser, even during browser resizing.</p>