title: How to change width of height of SVG with CSS?
body: <p>I have a CRA React App.  </p>
  
  <p>How do you change the width and height of an SVG without preserving aspect ratio (e.g. width 500px height 10px)?</p>
  
  <pre><code>import ornament from '../../assets/img/ornament.svg';
  
  &lt;img src={ornament} style={{width: '500px', height: '20px'}} /&gt;
  </code></pre>
  
  <p>This preserves aspect ratio and only changes size. I want it to transform to 500px width and 20px height. So original 400px 400px => 500px 20px.</p>
  
  <p>EDIT: example on codesandbox: <a href="https://codesandbox.io/s/40xj3zv5w7" rel="nofollow noreferrer">https://codesandbox.io/s/40xj3zv5w7</a> , the image gets really small instead of 400px width and 10px height.</p>