title: Fit svg into a container
body: <p>I have this linkedin logo as svg that I'm trying to fit into a div element. However, the svg won't scale correctly. The logo is square, so I have set the viewBox to be 100x100 and also given the width and the height as 100. The result is that the logo is cropped: only one corner is shown. Any idea what I'm doing wrong here?</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 {
    height: 100px;
    width: 400px;
    background-color: rebeccapurple;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
    &lt;svg width="100" height="100" viewBox="0 0 100 100"&gt;
                      &lt;path d="m 1227.06,212.93 h -213.44 v 334.187 c 0,79.731 -1.46,182.235 -110.983,182.235 -111.145,0 -128.164,-86.825 -128.164,-176.461 V 212.93 H 561.047 V 900.137 H 765.93 v -93.891 h 2.84 c 28.496,54.027 98.171,110.996 202.082,110.996 216.278,0 256.208,-142.336 256.208,-327.359 z M 320.344,994.082 c -68.457,0 -123.867,55.508 -123.867,123.868 0,68.3 55.41,123.8 123.867,123.8 68.277,0 123.765,-55.5 123.765,-123.8 0,-68.36 -55.488,-123.868 -123.765,-123.868 z M 427.09,212.93 H 213.496 V 900.137 H 427.09 Z M 1333.43,1440 H 106.289 C 47.6484,1440 0,1393.52 0,1336.21 V 103.91 C 0,46.5508 47.6484,0 106.289,0 H 1333.43 c 58.74,0 106.59,46.5508 106.59,103.91 v 1232.3 c 0,57.31 -47.85,103.79 -106.59,103.79" /&gt;
                  &lt;/svg&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>