CODEWITHSUNDEEP
javascriptcssreactjsimagesvg
Leo Messi
Leo Messi

Reputation: 6166

SVG image size in React

I have an SVG image that must be imported. The original image is too big so it must be made smaller.

This is the image added in code:

  render() {
    return (
      <div>
        <Grid>
          <img src={mySvgImage}></img>
          //other elements
        </Grid>
    </div>
    );
}

Playing with Developers tools I had discovered that if in Styles > element.style it is added: height: 10% the image size is shrunk to the desired size. Like here:

enter image description here

So how can this be done in code?

I added it like inline CSS but doesn't work:

  render() {
    return (
      <div>
        <Grid>
          <img style={{ heigth: '10%' }} src={mySvgImage}></img>
          //other elements
        </Grid>
    </div>
    );
}

Tried with saving it in a css file and import it with className='myClassName', same, no changes. The image has the original size.

How can this be done?

Upvotes: 0

Views: 442

Answers (1)

Dennis Vash
Dennis Vash

Reputation: 53874

You might have a typo: 

// not heigth
<img style={{ height: '10%' }} src={mySvgImage}></img>

.imgClassName {
  height: 10%;
}

<div>
  <Grid>
    <img className="imgClassName" src={mySvgImage}></img>
  </Grid>
</div>

Upvotes: 1

Related Questions