title: SVG image size in React
body: <p>I have an SVG image that must be imported. The original image is too big so it must be made smaller.</p>
  <p>This is the image added in code:</p>
  <pre><code>  render() {
      return (
        &lt;div&gt;
          &lt;Grid&gt;
            &lt;img src={mySvgImage}&gt;&lt;/img&gt;
            //other elements
          &lt;/Grid&gt;
      &lt;/div&gt;
      );
  }
  </code></pre>
  <p>Playing with Developers tools I had discovered that if in Styles &gt; element.style it is added: height: 10% the image size is shrunk to the desired size. Like here:</p>
  <p><a href="https://i.stack.imgur.com/a43NX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/a43NX.png" alt="enter image description here" /></a></p>
  <p>So how can this be done in code?</p>
  <p>I added it like inline CSS but doesn't work:</p>
  <pre><code>  render() {
      return (
        &lt;div&gt;
          &lt;Grid&gt;
            &lt;img style={{ heigth: '10%' }} src={mySvgImage}&gt;&lt;/img&gt;
            //other elements
          &lt;/Grid&gt;
      &lt;/div&gt;
      );
  }
  </code></pre>
  <p>Tried with saving it in a css file and import it with <code>className='myClassName'</code>, same, no changes. The image has the original size.</p>
  <p>How can this be done?</p>