title: SVG Path changes when applying CSS Transforms
body: <p><strong>Goal</strong></p>
  <p>Incorporate some SVG icons into HTML using the <code>svg</code>-tag. Add simple CSS <code>:hover</code>-effects using the <code>transform</code>-Property, mainly to rotate and/or translate single elements inside the <code>svg</code>-element.</p>
  <p><strong>Problem</strong></p>
  <p>As soon the <code>transform</code>-Property is applied to an element inside the <code>svg</code>, the element gets squished or stretched. This happens with <code>line</code>-elements as well as <code>path</code>-elements.</p>
  <p><strong>What I tried</strong></p>
  <p>I tried playing around with HTML-attributes such as <code>viewbox</code>, <code>preserveAspectRatio</code> or <code>vector-effect</code>, but nothing seemed to make a difference.</p>
  <p><strong>My current HTML-Code:</strong></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-html lang-html prettyprint-override"><code>&lt;svg class="icon" width="13.2px" height="13.2px" viewBox="0 0 13.2 13.2" preserveAspectRatio="xMidYMid"&gt;
  &lt;path class="line line-1 st0" d="M12.3,6.5c0,0.6-0.5,1.3-1.2,1.3h-9c-0.7,0-1.2-0.6-1.2-1.3s0.5-1.2,1.2-1.2h9C11.8,5.3,12.3,5.9,12.3,6.5z" vector-effect="non-scaling-stroke"/&gt;
  &lt;path class="line line-2 st1" d="M6.6,12.3c-0.7,0-1.2-0.6-1.2-1.2v-9c0-0.7,0.6-1.2,1.2-1.2c0.6,0,1.2,0.6,1.2,1.2v9C7.9,11.7,7.3,12.3,6.6,12.3z" vector-effect="non-scaling-stroke"/&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><strong>Screenshots</strong></p>
  <ul>
  <li>Left: Default, code like above.</li>
  <li>Right: Same HTML code, <code>.line-2</code> has the following CSS applied: <code>transform: translateX(0)</code>. You can clearly see that both paths got squished, even in this example where none of the elements is actually transformed.</li>
  </ul>
  <p><a href="https://i.stack.imgur.com/IBndc.jpg" rel="nofollow noreferrer">Screenshot found here</a></p>