title: responsive svg using viewbox and preserveaspect ratio when no width and height is specified on the svg
body: <p>I have a large svg image and I want it scales well in different scenarios (see snippet).</p>
  
  <p>I originally was using the <code>width</code> and <code>height</code> attributes of the svg and was setting these values everytime the screen resized.</p>
  
  <p>I then discovered the viewbox. </p>
  
  <p>What I do not understand is what do I set width and height arguments of the viewBox to if there are no svg width and height attributes.</p>
  
  <p>I have this svg document</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-js lang-js prettyprint-override"><code>document.addEventListener("DOMContentLoaded",function(){
    var container = document.querySelector('.chart');
  
    container.addEventListener('click', popOut, false)
  });
  
  function popOut() {
    var container = document.querySelector('.chart');
  
    if (container.className.split(/\s+/).indexOf("popper") === -1) {
  container.classList.add('popper');
    } 
  
    var svg = document.querySelector('svg');
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html {
    min-height: 100%;
    height: 100%;
    margin: 0;
  }
  
  div {
    border: 1px solid gray;
  }
  
  body {
    height: 100%;
    font-size: 20px;
  }
  
  path {
    stroke: #000;
  }
  
  .container {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
  }
  
  .container&gt;div {
    flex: 1;
  }
  
  .row {
    display: flex;
  }
  
  .item {
    flex: 1;
    padding: 8px;
  }
  
  .chart {
    display: inline-block;
    position: relative;
    width: 100%;
    height: 100%;
    vertical-align: top;
    overflow: hidden;
    "
  
  }
  
  .popper {
    z-index: 1000 !important;
    width: 100% !important;
    height: 100% !important;
    position: fixed !important;
    top: 0 !important;
    left: 0;
    background-color: #fff;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
    &lt;body&gt;
  &lt;div class="container"&gt;
    &lt;div class="item"&gt;Div One&lt;/div&gt;
    &lt;div class="row"&gt;
      &lt;div class="item chart"&gt;
        &lt;button type="button" onClick="window.popOut()"&gt;
        Pop Out
        &lt;/button&gt;
        &lt;svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 1200 800"&gt;&lt;g class="vx-group vx-tree" transform="translate(30, 37)"&gt;&lt;g transform="matrix(1,0,0,1,0,0)"&gt;&lt;g class="vx-group" transform="translate(0, 0)"&gt;&lt;path class="vx-link-vertical link__node" d="M189.27272727272728,353.5C189.27272727272728,176.75,567.8181818181819,176.75,567.8181818181819,0" percent="20.5" stroke-width="1" stroke-opacity="0.2" fill="none"&gt;&lt;/path&gt;&lt;path class="vx-link-vertical link__node" d="M567.8181818181819,353.5C567.8181818181819,176.75,567.8181818181819,176.75,567.8181818181819,0" percent="20.5" stroke-width="1" stroke-opacity="0.2" fill="none"&gt;&lt;/path&gt;&lt;path class="vx-link-vertical link__node" d="M946.3636363636364,353.5C946.3636363636364,176.75,567.8181818181819,176.75,567.8181818181819,0" percent="20.5" stroke-width="1" stroke-opacity="0.2" fill="none"&gt;&lt;/path&gt;&lt;path class="vx-link-vertical link__node" d="M189.27272727272728,353.5C189.27272727272728,530.25,94.63636363636364,530.25,94.63636363636364,707" percent="20.5" stroke-width="1" stroke-opacity="0.2" fill="none"&gt;&lt;/path&gt;&lt;path class="vx-link-vertical link__node" d="M189.27272727272728,353.5C189.27272727272728,530.25,283.90909090909093,530.25,283.90909090909093,707" percent="20.5" stroke-width="1" stroke-opacity="0.2" fill="none"&gt;&lt;/path&gt;&lt;/g&gt;&lt;g class="vx-group" transform="translate(0, 0)"&gt;&lt;g class="vx-group node__0" transform="translate(567.8181818181819, 0)" opacity="1"&gt;&lt;g transform="matrix(1,0,0,1,0,0)" class="node__container"&gt;&lt;svg class="node__inactive" x="0" y="0" style="overflow: visible;"&gt;&lt;polygon points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" class="node__hexagon undefined"&gt;&lt;/polygon&gt;&lt;/svg&gt;
        &lt;g class="node__plan undefined node__inactive"&gt;
          &lt;use xlink:href="#icon-Plan"&gt;&lt;/use&gt;
        &lt;/g&gt;
        &lt;g&gt;&lt;svg x="0" y="0" style="overflow: visible;"&gt;&lt;text class="label-down__item__name" width="150" y="48.63100051879883" x="0" text-anchor="middle" style="pointer-events: none;"&gt;&lt;tspan x="0" dy="0em"&gt;Finance BCP&lt;/tspan&gt;&lt;/text&gt;&lt;/svg&gt;&lt;svg x="0" y="0"
            style="overflow: visible;"&gt;&lt;text class="label-down__item__type" width="150" y="68.63100051879883" x="0" text-anchor="middle" style="pointer-events: none;"&gt;&lt;tspan x="0" dy="0.71em"&gt;Plan&lt;/tspan&gt;&lt;/text&gt;&lt;/svg&gt;&lt;/g&gt;
        &lt;/g&gt;
        &lt;/g&gt;
        &lt;g class="vx-group node__1" transform="translate(189.27272727272728, 353.5)" opacity="1"&gt;
          &lt;g transform="matrix(1,0,0,1,0,0)" class="node__container"&gt;&lt;svg class="" x="0" y="0" style="overflow: visible;"&gt;&lt;polygon points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" class="node__hexagon node__active"&gt;&lt;/polygon&gt;&lt;/svg&gt;
            &lt;g class="node__service node__active"&gt;
              &lt;use xlink:href="#icon-Service"&gt;&lt;/use&gt;
            &lt;/g&gt;
            &lt;g&gt;&lt;svg x="0" y="0" style="overflow: visible;"&gt;&lt;text class="label-down__item__name" width="150" y="48.92399978637695" x="0" text-anchor="middle" style="pointer-events: none;"&gt;&lt;tspan x="0" dy="0em"&gt;Accounts Receivable&lt;/tspan&gt;&lt;/text&gt;&lt;/svg&gt;
              &lt;svg x="0" y="0" style="overflow: visible;"&gt;&lt;text class="label-down__item__type" width="150" y="68.92399978637695" x="0" text-anchor="middle" style="pointer-events: none;"&gt;&lt;tspan x="0" dy="0.71em"&gt;Service&lt;/tspan&gt;&lt;/text&gt;&lt;/svg&gt;
            &lt;/g&gt;&lt;svg class="zoomout__container" height="20" width="20" viewBox="15 55 30 20"&gt;&lt;g&gt;&lt;circle class="node__shape-fill" cx="15" cy="10" r="10" stroke-width="2"&gt;&lt;/circle&gt;&lt;line class="node__shape-fill" x1="8.5" y1="10" x2="21" y2="10" stroke-width="2"&gt;&lt;/line&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/g&gt;
        &lt;/g&gt;
        &lt;g class="vx-group node__2" transform="translate(567.8181818181819, 353.5)" opacity="1"&gt;
          &lt;g transform="matrix(1,0,0,1,0,0)" class="node__container"&gt;&lt;svg class="node__inactive" x="0" y="0" style="overflow: visible;"&gt;&lt;polygon points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" class="node__hexagon"&gt;&lt;/polygon&gt;&lt;/svg&gt;
            &lt;g class="node__service node__inactive"&gt;
              &lt;use xlink:href="#icon-Service"&gt;&lt;/use&gt;
            &lt;/g&gt;
            &lt;g&gt;&lt;svg x="0" y="0" style="overflow: visible;"&gt;&lt;text class="label-down__item__name" width="150" y="48.92399978637695" x="0" text-anchor="middle" style="pointer-events: none;"&gt;&lt;tspan x="0" dy="0em"&gt;General Accounting&lt;/tspan&gt;&lt;/text&gt;&lt;/svg&gt;
              &lt;svg x="0" y="0" style="overflow: visible;"&gt;&lt;text class="label-down__item__type" width="150" y="68.92399978637695" x="0" text-anchor="middle" style="pointer-events: none;"&gt;&lt;tspan x="0" dy="0.71em"&gt;Service&lt;/tspan&gt;&lt;/text&gt;&lt;/svg&gt;
            &lt;/g&gt;&lt;svg class="zoomout__container" height="20" width="20" viewBox="15 55 30 20"&gt;&lt;g&gt;&lt;circle class="node__shape-fill" cx="15" cy="10" r="10" stroke-width="2"&gt;&lt;/circle&gt;&lt;line class="node__shape-fill" x1="8.5" y1="10" x2="21" y2="10" stroke-width="2"&gt;&lt;/line&gt;&lt;line x1="16" y1="5" x2="16" y2="15" stroke-width="2"&gt;&lt;/line&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/g&gt;
        &lt;/g&gt;
        &lt;g class="vx-group node__3" transform="translate(946.3636363636364, 353.5)" opacity="1"&gt;
          &lt;g transform="matrix(1,0,0,1,0,0)" class="node__container"&gt;&lt;svg class="node__inactive" x="0" y="0" style="overflow: visible;"&gt;&lt;polygon points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" class="node__hexagon"&gt;&lt;/polygon&gt;&lt;/svg&gt;
            &lt;g class="node__service node__inactive"&gt;
              &lt;use xlink:href="#icon-Service"&gt;&lt;/use&gt;
            &lt;/g&gt;
            &lt;g&gt;&lt;svg x="0" y="0" style="overflow: visible;"&gt;&lt;text class="label-down__item__name" width="150" y="48.92399978637695" x="0" text-anchor="middle" style="pointer-events: none;"&gt;&lt;tspan x="0" dy="0em"&gt;Accounts Payable&lt;/tspan&gt;&lt;/text&gt;&lt;/svg&gt;
              &lt;svg x="0" y="0" style="overflow: visible;"&gt;&lt;text class="label-down__item__type" width="150" y="68.92399978637695" x="0" text-anchor="middle" style="pointer-events: none;"&gt;&lt;tspan x="0" dy="0.71em"&gt;Service&lt;/tspan&gt;&lt;/text&gt;&lt;/svg&gt;
            &lt;/g&gt;&lt;svg class="zoomout__container" height="20" width="20" viewBox="15 55 30 20"&gt;&lt;g&gt;&lt;circle class="node__shape-fill" cx="15" cy="10" r="10" stroke-width="2"&gt;&lt;/circle&gt;&lt;line class="node__shape-fill" x1="8.5" y1="10" x2="21" y2="10" stroke-width="2"&gt;&lt;/line&gt;&lt;line x1="16" y1="5" x2="16" y2="15" stroke-width="2"&gt;&lt;/line&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/g&gt;
        &lt;/g&gt;
        &lt;g class="vx-group node__4" transform="translate(94.63636363636364, 707)" opacity="1"&gt;
          &lt;g transform="matrix(1,0,0,1,0,0)" class="node__container"&gt;&lt;svg class="node__inactive" x="0" y="0" style="overflow: visible;"&gt;&lt;polygon points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" class="node__hexagon"&gt;&lt;/polygon&gt;&lt;/svg&gt;
            &lt;g class="node__activity node__inactive"&gt;
              &lt;use xlink:href="#icon-Activity"&gt;&lt;/use&gt;
            &lt;/g&gt;
            &lt;g&gt;&lt;svg x="0" y="0" style="overflow: visible;"&gt;&lt;text class="label-down__item__name" width="150" y="52.00199890136719" x="0" text-anchor="middle" style="pointer-events: none;"&gt;&lt;tspan x="0" dy="-1em"&gt;General Ledger Group&lt;/tspan&gt;&lt;tspan x="0" dy="1em"&gt;Accounting&lt;/tspan&gt;&lt;/text&gt;&lt;/svg&gt;
              &lt;svg x="0" y="0" style="overflow: visible;"&gt;&lt;text class="label-down__item__type" width="150" y="72.00199890136719" x="0" text-anchor="middle" style="pointer-events: none;"&gt;&lt;tspan x="0" dy="0.71em"&gt;Activity&lt;/tspan&gt;&lt;/text&gt;&lt;/svg&gt;
            &lt;/g&gt;0&lt;/g&gt;
        &lt;/g&gt;
        &lt;g class="vx-group node__5" transform="translate(283.90909090909093, 707)" opacity="1"&gt;
          &lt;g transform="matrix(1,0,0,1,0,0)" class="node__container"&gt;&lt;svg class="node__inactive" x="0" y="0" style="overflow: visible;"&gt;&lt;polygon points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" class="node__hexagon"&gt;&lt;/polygon&gt;&lt;/svg&gt;
            &lt;g class="node__activity node__inactive"&gt;
              &lt;use xlink:href="#icon-Activity"&gt;&lt;/use&gt;
            &lt;/g&gt;
            &lt;g&gt;&lt;svg x="0" y="0" style="overflow: visible;"&gt;&lt;text class="label-down__item__name" width="150" y="52.00199890136719" x="0" text-anchor="middle" style="pointer-events: none;"&gt;&lt;tspan x="0" dy="0em"&gt;Accounts Receivable&lt;/tspan&gt;&lt;/text&gt;&lt;/svg&gt;
              &lt;svg x="0" y="0" style="overflow: visible;"&gt;&lt;text class="label-down__item__type" width="150" y="72.00199890136719" x="0" text-anchor="middle" style="pointer-events: none;"&gt;&lt;tspan x="0" dy="0.71em"&gt;Activity&lt;/tspan&gt;&lt;/text&gt;&lt;/svg&gt;
            &lt;/g&gt;0&lt;/g&gt;
        &lt;/g&gt;
        &lt;/g&gt;
        &lt;/g&gt;
        &lt;/g&gt;
        &lt;/svg&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;Column two&lt;/div&gt;
      &lt;div class="item"&gt;Column Tree&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
    &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have set the preserveAspect ratio to the default value of <code>xMinYMin meet</code> but I have no idea what to set the initial values of width and height.</p>
  
  <p>In my example, the svg chart starts out as a small image in the bottom left and then can popout to take over the whole page.</p>
  
  <p>I really do not understand how to get the values.</p>
  
  <p>I've just used trial and error to get the initial viewBox values and I'd like to know programatticaly how to get them based on the parenet element or some other way.</p>
  
  <p>Read lots online but still in the dark about what the initial values should be for both the first value and when the svg spreads out over the whole page.</p>