title: SVG path doesnt fit to container viewbox
body: <p>Here I have an icon that comes with a plugin Im using <code>calender</code> and a new Icon I want to add to the icons set, the <code>twitter</code> icon.</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 {
      display: inline-block;
      height: 16px;
      width: 16px;
      margin: 2px 0;
      fill: #111;
      text-decoration: none;
      pointer-events: none;
      line-height: 1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" unselectable="on"&gt;&lt;path d="M8.1 7v1h2.7v1H8.094v3H11.7v-1H9v-1h2.7V7zM4.5 7v1h.8v3h-.8v1h2.7v-1h-.9V7zM.9 1v14h14.4V1h-1.8v2h-2.7V1H5.4v2H2.7V1zm.9 4h12.6v9H1.8z"&gt;&lt;/path&gt;&lt;/svg&gt;
  
  &lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" unselectable="on"&gt;&lt;path class="letterB" d="M16.16 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"&gt;&lt;/path&gt;&lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>both icons are in svg, but the first one <code>calendar</code> is made to work correctly with <code>viewbox 16 16</code>....the twitter icon I copied the svg path from an svg icons site....and it doesnt fit the container as in the example...</p>
  
  <p>how do I fix this? I tried using a class to <code>twitter path</code> but without success</p>