SVG size in react

Question

Hello im desperately trying to size an svg in react. No matter what i do the size stays the same even though the div containing it is much smaller. In normal html and css it would size automatically what am i doing wrong?

import React, { Component } from 'react';
import logo from './logo.svg'

class Logo extends Component {
    render(){
        return(
            <div className="size">
            <img src={logo} alt={"logo"}/> 
            </div>
        );
    }
}

export default Logo

svg part

 <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="none">
        <g transform="translate(0,0)">
        <title>Logo</title>
        <path fill="#009FE3" d="M36.9 707.8H1747V1000H36.9"/>
        <path d="M385 104.1h1.7l138.7 503.5h86.3L771.6.1h-90.5L567.7 494.2H566L429.8.1h-89.7L203.9 494.2h-1.7L88.8.1H0l158.3 607.5h86.2m889.6-119.4c-16.2 22.1-35.4 38.8-57.7 50.3-22.3 11.5-47 17.3-74.2 17.3-12 .2-26.4-2.9-43.3-9.2-16.9-6.3-31.9-16.8-45-31.5-13.1-14.7-20-34.7-20.8-59.9.3-31.5 9.5-56.9 27.6-76.1 18.1-19.2 43.6-38.7 76.4-58.3l137 167.4zm-110.9-252.1c-12.5-11.9-25.4-27.4-38.6-46.5-13.2-19.1-20.4-38.8-21.5-59.2-.3-7.2 1.2-15.9 4.5-26.1 3.3-10.2 10.1-19.3 20.3-27.3 10.2-8 25.6-12.1 46.2-12.6 13.5-.6 27.4 3.8 41.8 13.1 14.4 9.3 22.2 27.2 23.4 53.7-1.2 25.6-9.8 46.7-26 63.5-16.1 16.9-32.8 30.7-50.1 41.4zm195.5 240.3c15.5-29 27.2-56.8 35-83.4 7.8-26.6 12.5-50.4 14.1-71.4h-70.2c-3.5 21.2-6.9 38-10 50.2-3.2 12.2-8 27.1-14.5 44.5l-110.8-132c15.5-10 31.5-21.9 48.2-35.8 16.7-13.9 30.9-30.8 42.6-50.8 11.7-20 17.8-44.1 18.3-72.4.3-31.8-10.4-60.3-32.2-85.4-21.8-25.1-56.4-38.3-103.9-39.8-46.7 1.3-82.3 15-106.8 41.3-24.5 26.3-36.8 57.6-37 94-.1 25.2 5.2 47.4 15.7 66.6 10.5 19.2 26.7 41.9 48.6 67.9-54.9 30.5-91.8 60-110.7 88.3-18.9 28.3-27.6 62.6-26.3 102.9-.6 16.6 3.6 37.2 12.6 61.9 9 24.7 26.4 46.7 52.3 66.2 25.8 19.5 63.7 29.8 113.5 30.9 43.6-.5 79-8.2 106.1-23.3 27.1-15 50.7-34.6 70.6-58.8l56.7 69.3h96.4l-108.3-130.9zm70.1-403.7h205.6v534.8h82V72.7H1782V0h-493.2"/>
        <path fill="#FFF" d="M343.3 821.9h-24.1L305.3 886h-.3l-13.4-64.1h-23.7L255.4 886h-.4l-13.9-64.1h-24.9l25.1 89.2h24.1l13.9-65h.4l13.9 65h24.1m192.6-89.2h-24.1L472.3 886h-.3l-13.4-64.1H435L422.4 886h-.3l-13.9-64.1h-25.1l25.2 89.2h24.2l13.9-65h.3l13.9 65h24.1m192.7-89.2h-24.1L639.4 886h-.4l-13.5-64.1h-23.6L589.3 886h-.3l-13.9-64.1h-25l25.2 89.2h24.1l13.9-65h.3l13.9 65h24.2m69.3-24.5h25.1V911H721zm109.4 24.5h23.4c3.2-15.3 5.8-27.8 7.8-37.6 2-9.7 3.7-17.7 4.9-23.9 1.3-6.2 2.3-11.8 3.2-16.6.9-4.9 1.7-10.1 2.6-15.7h.3c1 5.6 1.9 11 2.9 16.1.9 5.1 2 10.9 3.3 17.3 1.3 6.5 2.9 14.5 4.9 24.1 2 9.6 4.5 21.7 7.6 36.3h24.1l33.8-120.2h-25.5c-3.9 16.4-7 29.7-9.4 40-2.4 10.3-4.2 18.5-5.5 24.5-1.3 6-2.3 10.7-3 14.2-.7 3.5-1.3 6.5-1.7 9.2h-.3c-.6-3.7-1.3-7.4-2-11-.7-3.6-1.6-8.3-2.7-14-1.2-5.7-2.8-13.5-4.9-23.5-2.1-10-4.9-23.1-8.4-39.4h-26.6c-3.2 15.6-5.7 28.5-7.7 38.6-2 10.1-3.5 18.2-4.7 24.3-1.1 6.1-2 11.1-2.7 14.8-.7 3.8-1.2 7.2-1.7 10.2h-.3c-.5-3.3-1.1-6.7-1.7-10.3-.7-3.6-1.6-8.3-2.9-14.1-1.2-5.9-3-13.8-5.3-23.9-2.3-10.1-5.4-23.3-9.2-39.6h-26.8l34.2 120.2zm246.9-89.2h-23.4v51.4c-.3 7.8-2.3 13.2-6.2 16.1-3.8 2.9-7.8 4.3-11.9 4.2-3.8.2-7.2-.9-10.3-3.1-3.1-2.2-4.7-6.7-4.9-13.4v-55.3h-23.4v58.6c.2 11.3 3 19.6 8.6 24.9 5.5 5.3 12.8 7.9 21.7 7.9 6.2 0 11.6-1.3 16.2-3.9s8.2-6.2 10.9-11h.3v12.5h22.4v-88.9zm111.6-9.9h36.3v-21.3h-97.8V812h36.3v99.1h25.2m69.7-24.5h25.1V911h-25.1zm165.1-95.9h-23.4v42.7h-.3c-1.7-3.1-4.6-6.1-8.6-9.1s-9.7-4.6-17.2-4.8c-6.6 0-12.7 1.7-18.3 5-5.6 3.4-10.1 8.4-13.5 15.2-3.4 6.8-5.1 15.3-5.2 25.6 0 8.3 1.3 16.1 3.8 23.3 2.6 7.2 6.6 13.1 12.2 17.6 5.5 4.5 12.7 6.8 21.5 7 5 .1 9.8-.9 14.4-3s8.4-5.6 11.4-10.5h.3V911h22.9V790.7zm-62.5 76.5c-.1-7.3 1.4-13.6 4.4-18.9 3-5.3 8.2-8.1 15.6-8.4 5.3.1 9.4 1.5 12.4 4.3 2.9 2.8 5 6.3 6.1 10.6 1.1 4.3 1.7 8.9 1.7 13.8.1 6.9-1.5 12.8-4.8 17.8s-8.6 7.6-16 7.9c-5-.2-8.9-1.7-11.7-4.6-2.8-3-4.8-6.5-5.9-10.6-1.3-4.4-1.9-8.2-1.8-11.9zm172.4 17.7c-1 3.2-3 5.6-5.8 7.3-2.8 1.6-5.9 2.5-9.3 2.5-6.2-.1-10.8-1.5-13.7-4.2-2.9-2.6-4.8-5.6-5.7-9-.9-3.4-1.4-6.3-1.5-8.6h61.1v-4.2c-.2-13.4-2.5-23.7-6.9-30.8-4.4-7.1-9.8-12-16.2-14.6s-12.6-3.8-18.7-3.7c-9.7.2-17.4 2-23.1 5.5-5.8 3.5-10 7.9-12.8 13-2.8 5.1-4.7 10.1-5.5 15-.9 4.9-1.3 8.7-1.2 11.6.3 18.1 4.5 30.8 12.8 38.1 8.2 7.3 18.8 10.9 31.6 10.6 5.2.1 10.4-.8 15.6-2.6 5.2-1.8 9.9-4.8 14.1-8.9 4.2-4.2 7.4-9.8 9.5-16.9l-24.3-.1zm-35.3-27.2c.7-5.9 2.5-10.5 5.5-13.8 3-3.3 7.2-5 12.8-5 4-.1 7.8 1.2 11.4 4 3.6 2.8 5.9 7.7 6.7 14.8h-36.4z"/>
    </g>
</svg>

css part

body 
    {
        margin: 0; 
        height: 100%; 
        overflow: hidden
  }

.wrapper
            {
            min-width: 320px;
            max-width: 4096px;
            width: 100%;
            height: calc(100vh - 0.4vw);
            float:left;
        }
    .size
        {
        width:100px;
        }

Perhaps this will help: stackoverflow.com/q/19484707/2088135 — Tom Fenech, Commented Aug 27, 2018 at 11:54

Ankit Kumar Rajpoot · Accepted Answer · 2019-10-14 18:59:46Z

35

Try this, it will be working perfectly.

import Logo from "./logo.svg";
            <img
              src={Logo}
              style={{ height: 53, width: 36 }}
              alt="website logo"
            />

answered Oct 14, 2019 at 18:59

Ankit Kumar Rajpoot

5,5302 gold badges40 silver badges32 bronze badges

In TypeScript, this does not work if you have defined svg as type. The compiler will complain, and even with typecasts I don't get it to work.
– Risadinha
Commented Jun 23, 2022 at 15:51

Add a comment |

Pawel · Accepted Answer · 2021-02-04 18:23:58Z

32

Open SVG file in a text editor and remove width and height attributes from the root node

answered Feb 4, 2021 at 18:23

Pawel

17.7k5 gold badges76 silver badges75 bronze badges

5

This needs to be in top 2nd or 3rd as most of us finding this solution.
– xxxhomie21
Commented Feb 19, 2022 at 13:04
1

Alongside using import { ReactElement as ComponentName } from "./file.svg" if you remove the size attrs from the svg element, then it's just doing <ComponentName width="24px" height="24px" />
– Tebo
Commented Jun 1, 2022 at 20:45
2

Take it a bit further and add fill="currentColor" to the svg element and you can filly customize it at the component level
– Tebo
Commented Jun 1, 2022 at 20:46

Add a comment |

score 27 · Accepted Answer · 2021-02-05 17:20:04Z

27

If you import a SVG file as a component:

import { ReactElement as ComponentName } from "./file.svg"

You can change the size using CSS transform: scale(2) in <ComponentName />, which in React can be achieved using className or a global CSS file.

Note: To change the color you can use .componentClass path { fill: "color" }, but if you change the scale on .componentClass path it'll not look cool, even if you change the width and height on the component .componentClass, which will actually change the SVG container size and not the content...

edited Feb 5, 2021 at 17:20

answered Jun 3, 2020 at 22:41

user7075574

2

When scaling down (eg. 0.75), the svg is being scaled, but still takes up the original space around. any idea?
– martinoss
Commented Dec 2, 2020 at 9:26
In my case, I used font-size cause I was working with icons. If you have control over your <svg /> you can check the type of figure that you're dealing with ant set its size manually, e.g the view box that may not be scaling in accord to your figure.
– user7075574
Commented Dec 2, 2020 at 12:37
Update: I wrapped the svg in a div and set height and weight, simple as that.
– martinoss
Commented Dec 2, 2020 at 16:07
only works with "Create React App"
– llama
Commented Feb 7, 2023 at 16:04

Add a comment |

Sakhi Mansoor · Accepted Answer · 2018-08-27 11:52:20Z

Hi I'm not sure how is your webpack configured to resolve modules. But here is solution for your case :

import React, { Component } from 'react';
import logo from './logo.svg'

const SvgIcon = () => (<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="none">
  <g transform="translate(0,0)">
    <title>Logo</title>
    <path fill="#009FE3" d="M36.9 707.8H1747V1000H36.9" />
    <path d="M385 104.1h1.7l138.7 503.5h86.3L771.6.1h-90.5L567.7 494.2H566L429.8.1h-89.7L203.9 494.2h-1.7L88.8.1H0l158.3 607.5h86.2m889.6-119.4c-16.2 22.1-35.4 38.8-57.7 50.3-22.3 11.5-47 17.3-74.2 17.3-12 .2-26.4-2.9-43.3-9.2-16.9-6.3-31.9-16.8-45-31.5-13.1-14.7-20-34.7-20.8-59.9.3-31.5 9.5-56.9 27.6-76.1 18.1-19.2 43.6-38.7 76.4-58.3l137 167.4zm-110.9-252.1c-12.5-11.9-25.4-27.4-38.6-46.5-13.2-19.1-20.4-38.8-21.5-59.2-.3-7.2 1.2-15.9 4.5-26.1 3.3-10.2 10.1-19.3 20.3-27.3 10.2-8 25.6-12.1 46.2-12.6 13.5-.6 27.4 3.8 41.8 13.1 14.4 9.3 22.2 27.2 23.4 53.7-1.2 25.6-9.8 46.7-26 63.5-16.1 16.9-32.8 30.7-50.1 41.4zm195.5 240.3c15.5-29 27.2-56.8 35-83.4 7.8-26.6 12.5-50.4 14.1-71.4h-70.2c-3.5 21.2-6.9 38-10 50.2-3.2 12.2-8 27.1-14.5 44.5l-110.8-132c15.5-10 31.5-21.9 48.2-35.8 16.7-13.9 30.9-30.8 42.6-50.8 11.7-20 17.8-44.1 18.3-72.4.3-31.8-10.4-60.3-32.2-85.4-21.8-25.1-56.4-38.3-103.9-39.8-46.7 1.3-82.3 15-106.8 41.3-24.5 26.3-36.8 57.6-37 94-.1 25.2 5.2 47.4 15.7 66.6 10.5 19.2 26.7 41.9 48.6 67.9-54.9 30.5-91.8 60-110.7 88.3-18.9 28.3-27.6 62.6-26.3 102.9-.6 16.6 3.6 37.2 12.6 61.9 9 24.7 26.4 46.7 52.3 66.2 25.8 19.5 63.7 29.8 113.5 30.9 43.6-.5 79-8.2 106.1-23.3 27.1-15 50.7-34.6 70.6-58.8l56.7 69.3h96.4l-108.3-130.9zm70.1-403.7h205.6v534.8h82V72.7H1782V0h-493.2" />
    <path fill="#FFF" d="M343.3 821.9h-24.1L305.3 886h-.3l-13.4-64.1h-23.7L255.4 886h-.4l-13.9-64.1h-24.9l25.1 89.2h24.1l13.9-65h.4l13.9 65h24.1m192.6-89.2h-24.1L472.3 886h-.3l-13.4-64.1H435L422.4 886h-.3l-13.9-64.1h-25.1l25.2 89.2h24.2l13.9-65h.3l13.9 65h24.1m192.7-89.2h-24.1L639.4 886h-.4l-13.5-64.1h-23.6L589.3 886h-.3l-13.9-64.1h-25l25.2 89.2h24.1l13.9-65h.3l13.9 65h24.2m69.3-24.5h25.1V911H721zm109.4 24.5h23.4c3.2-15.3 5.8-27.8 7.8-37.6 2-9.7 3.7-17.7 4.9-23.9 1.3-6.2 2.3-11.8 3.2-16.6.9-4.9 1.7-10.1 2.6-15.7h.3c1 5.6 1.9 11 2.9 16.1.9 5.1 2 10.9 3.3 17.3 1.3 6.5 2.9 14.5 4.9 24.1 2 9.6 4.5 21.7 7.6 36.3h24.1l33.8-120.2h-25.5c-3.9 16.4-7 29.7-9.4 40-2.4 10.3-4.2 18.5-5.5 24.5-1.3 6-2.3 10.7-3 14.2-.7 3.5-1.3 6.5-1.7 9.2h-.3c-.6-3.7-1.3-7.4-2-11-.7-3.6-1.6-8.3-2.7-14-1.2-5.7-2.8-13.5-4.9-23.5-2.1-10-4.9-23.1-8.4-39.4h-26.6c-3.2 15.6-5.7 28.5-7.7 38.6-2 10.1-3.5 18.2-4.7 24.3-1.1 6.1-2 11.1-2.7 14.8-.7 3.8-1.2 7.2-1.7 10.2h-.3c-.5-3.3-1.1-6.7-1.7-10.3-.7-3.6-1.6-8.3-2.9-14.1-1.2-5.9-3-13.8-5.3-23.9-2.3-10.1-5.4-23.3-9.2-39.6h-26.8l34.2 120.2zm246.9-89.2h-23.4v51.4c-.3 7.8-2.3 13.2-6.2 16.1-3.8 2.9-7.8 4.3-11.9 4.2-3.8.2-7.2-.9-10.3-3.1-3.1-2.2-4.7-6.7-4.9-13.4v-55.3h-23.4v58.6c.2 11.3 3 19.6 8.6 24.9 5.5 5.3 12.8 7.9 21.7 7.9 6.2 0 11.6-1.3 16.2-3.9s8.2-6.2 10.9-11h.3v12.5h22.4v-88.9zm111.6-9.9h36.3v-21.3h-97.8V812h36.3v99.1h25.2m69.7-24.5h25.1V911h-25.1zm165.1-95.9h-23.4v42.7h-.3c-1.7-3.1-4.6-6.1-8.6-9.1s-9.7-4.6-17.2-4.8c-6.6 0-12.7 1.7-18.3 5-5.6 3.4-10.1 8.4-13.5 15.2-3.4 6.8-5.1 15.3-5.2 25.6 0 8.3 1.3 16.1 3.8 23.3 2.6 7.2 6.6 13.1 12.2 17.6 5.5 4.5 12.7 6.8 21.5 7 5 .1 9.8-.9 14.4-3s8.4-5.6 11.4-10.5h.3V911h22.9V790.7zm-62.5 76.5c-.1-7.3 1.4-13.6 4.4-18.9 3-5.3 8.2-8.1 15.6-8.4 5.3.1 9.4 1.5 12.4 4.3 2.9 2.8 5 6.3 6.1 10.6 1.1 4.3 1.7 8.9 1.7 13.8.1 6.9-1.5 12.8-4.8 17.8s-8.6 7.6-16 7.9c-5-.2-8.9-1.7-11.7-4.6-2.8-3-4.8-6.5-5.9-10.6-1.3-4.4-1.9-8.2-1.8-11.9zm172.4 17.7c-1 3.2-3 5.6-5.8 7.3-2.8 1.6-5.9 2.5-9.3 2.5-6.2-.1-10.8-1.5-13.7-4.2-2.9-2.6-4.8-5.6-5.7-9-.9-3.4-1.4-6.3-1.5-8.6h61.1v-4.2c-.2-13.4-2.5-23.7-6.9-30.8-4.4-7.1-9.8-12-16.2-14.6s-12.6-3.8-18.7-3.7c-9.7.2-17.4 2-23.1 5.5-5.8 3.5-10 7.9-12.8 13-2.8 5.1-4.7 10.1-5.5 15-.9 4.9-1.3 8.7-1.2 11.6.3 18.1 4.5 30.8 12.8 38.1 8.2 7.3 18.8 10.9 31.6 10.6 5.2.1 10.4-.8 15.6-2.6 5.2-1.8 9.9-4.8 14.1-8.9 4.2-4.2 7.4-9.8 9.5-16.9l-24.3-.1zm-35.3-27.2c.7-5.9 2.5-10.5 5.5-13.8 3-3.3 7.2-5 12.8-5 4-.1 7.8 1.2 11.4 4 3.6 2.8 5.9 7.7 6.7 14.8h-36.4z" />
  </g>
</svg>)

class Logo extends Component {
  render() {
    return (
      <div style={{height:'200px',
      width: '500px'}} className="size">
        <SvgIcon />
      </div>
    );
  }
}

export default Logo

ty i will try it out tommorow at work and tell u my experience — Blue Lovag, Commented Aug 27, 2018 at 14:33
@Jurijcorn - It's been almost a year and you have yet told your experience ;) — vsync, Commented Jun 20, 2019 at 9:04
@vsync hey i'm sorry i didn't told you my experience, shortly after my task was changed to something else sadly so i haven't tried it out until now :/ I'm not anymore involved in the react development because my project was submitted to the higher places, i'm doing more graphic design and frontent delight right now :P — Blue Lovag, Commented Oct 15, 2019 at 10:17
This doesn't work for me, and according to a pretty comprehensive article on CSS tricks (below), shouldn't work without the viewbox attribute. Once I set that up with original dimensions of the SVG this code worked css-tricks.com/scale-svg — Chris Webb, Commented Nov 8, 2019 at 5:55

Tee · Accepted Answer · 2021-03-04 13:58:31Z

This can easily be done by editing the respective SVG code directly. See as below:

<svg id="_x31_" enable-background="new 0 0 24 24" height="250" viewBox="0 0 24 24" width="250" xmlns="http://www.w3.org/2000/svg"><path d="m20.5 18h-6c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h6c.276 0 .5.224.5.5s-.224.5-.5.5z"/><path d="m13.5 9h-10c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h10c.276 0 .5.224.5.5s-.224.5-.5.5z"/><path d="m10.5 12h-7c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h7c.276 0 .5.224.5.5s-.224.5-.5.5z"/><path d="m8.5 15h-5c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h5c.276 0 .5.224.5.5s-.224.5-.5.5z"/></svg>

You only need to change the height and width attributes respectively.

Jonathan Nadeau · Accepted Answer · 2022-10-21 15:51:17Z

0

I had the same issue and fix it by first,

importing the svg as a ReactComponent
wrapping the component in a div
making the component width 100% of it's parent
ajusting the height to get the desire size

For me, that worked and it kept its proportions

answered Oct 21, 2022 at 15:51

Jonathan Nadeau

231 silver badge3 bronze badges

Add a comment |

Erkka Mutanen · Accepted Answer · 2021-12-22 09:54:11Z

-1

I have resized the icon using the user7075574's import (reference to that How to display svg icons(.svg files) in UI using React Component?)

import { ReactElement as IconTestName } from "./testname.svg"

and used props on JSX.Element like

const AppWithSingleIcon = () => <IconTestName height={24} width={24} fill='orange' />

This gives just enough control to resize SVG path without an external containing div. If the path size is set e.g. at size (24, 24) then setting the prop height={36} will not resize because the prop width={24} is a limiting factor.

answered Dec 22, 2021 at 9:54

Erkka Mutanen

6971 gold badge10 silver badges17 bronze badges

It just makes the container bigger, but the image of the SVG stays the same.
– MasterPiece
Commented Mar 2, 2022 at 9:45

Add a comment |

Sebastián Sethson · Accepted Answer · 2018-12-19 21:14:41Z

-8

You must make:

import logo from './logo.svg'
const Logo = () => {

return (
  <logo height='200px' width='500px' alt="tuvieja"/>
);
}

}

answered Dec 19, 2018 at 21:14

Sebastián Sethson

112 bronze badges

This goes against Stack Overflow policy.
– Federico Peralta
Commented Dec 14, 2022 at 22:47

Add a comment |

Collectives™ on Stack Overflow

SVG size in react

8 Answers 8

Not the answer you're looking for? Browse other questions tagged
css
reactjs
svg
or ask your own question.

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

Not the answer you're looking for? Browse other questions tagged cssreactjssvg or ask your own question.

Linked

Related

Not the answer you're looking for? Browse other questions tagged
css
reactjs
svg
or ask your own question.