title: centering SVG what do i need to change on the svg so it centers on the container
body: <p>ive been trying to search how to best change the svg node so that it's center when i start messing around it's size.</p>
  <p>what i have is this, and with this size, the svg and the path is center on top of the circle.</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-icon {
    display: block;
    margin: 0 auto;
    position: absolute;
    top: calc(50% - 14px);
    left: calc(50% - 14px);
  }
  .poll-icon-container {
    height: 50px;
    width: 50px;
    position: relative;
    border-radius: 50%;
  }
  .custom-color-primary {
    background-color: pink;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="rounded-circle poll-icon-container text-success custom-color-primary"&gt;
                              &lt;svg width="2em"
                              height="2em"
                              viewBox="0 0 18 18" class="bi bi-box-arrow-in-up-right svg-icon" fill="currentColor" xmlns="http://www.w3.org/2000/svg"&gt;
                                &lt;path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"/&gt;
                              &lt;/svg&gt;
                            &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>but once i start messing around the size, it would start moving around. i understand the first 2 parts of the viewbox is the panning of the object. but if i rely on that, then the svg (or the viewbox itself) is still off the center. here's what i have with a different size.</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-icon {
    display: block;
    margin: 0 auto;
    position: absolute;
    top: calc(50% - 14px);
    left: calc(50% - 14px);
  }
  .poll-icon-container {
    height: 50px;
    width: 50px;
    position: relative;
    border-radius: 50%;
  }
  .custom-color-primary {
    background-color: pink;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="rounded-circle poll-icon-container text-success custom-color-primary"&gt;
                              &lt;svg width="3em"
                              height="3em"
                              viewBox="0 0 18 18" class="bi bi-box-arrow-in-up-right svg-icon" fill="currentColor" xmlns="http://www.w3.org/2000/svg"&gt;
                                &lt;path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"/&gt;
                              &lt;/svg&gt;
                            &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Basically what i do is i inspect element and you'll see the viewbox bigger and the (upper left) tip is at the same location and it just got bigger. I guess one of the question I have is do i move the viewbox's location so it center? if so, how do i do that correctly?</p>