title: How to define SVG viewBox to remove padding around visible elements
body: <p><a href="https://raw.githubusercontent.com/google/material-design-icons/master/device/svg/production/ic_airplanemode_active_24px.svg" rel="nofollow noreferrer">This SVG icon</a> from <a href="https://material.io/tools/icons/" rel="nofollow noreferrer">Material Design</a> is slightly off-center. The reason appears due to its viewBox defining a 24x24 container while the only visible path is defined with a 79.17x83.33 container (which you can see if you inspect the SVG in Google Chrome).</p>
  
  <p>Assuming this hypothesis is correct, how can you correct the viewBox so there's no extra padding, which hopefully causes the airplane to get centered? There are other answers that suggest repositioning/translating the SVG to get it centered, but that's not the goal.</p>
  
  <p>The goal is to modify the viewBox, remove extra padding around the visible elements, and allow the SVG to naturally get centered without translation.</p>
  
  <p>The ultimate goal is to ensure the SVG is centered without translating/repositioning the element.</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>#container {
    width: 100px;
    height: 100px;
    background: red;
  }
  
  #icon {
    width: 100px;
    height: 100px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
  
  &lt;svg id="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"&gt;&lt;path d="M10.18 9"/&gt;&lt;path d="M21 16v-2l-8-5V3.5c0-.83-.67-1.5-1.5-1.5S10 2.67 10 3.5V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z"/&gt;&lt;/svg&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>