title: How do I resize and svg logo in react gatsby?
body: <p><a href="https://i.stack.imgur.com/m7Dek.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/m7Dek.png" alt="enter image description here" /></a></p>
  <p>I have been trying to resize this logo without making the container itself larger. I'm completely stuck and dont know what to do. Modifying the logo svg file with inline styling
  <code> &lt;svg viewBox=&quot;0 0 493.19 493.19&quot; width='400'height='400'&gt;</code> produces the above result. I just want to make the logo bigger without pushing down all the components under it. I will post the layout code itself, if that will make things easier to help me out. Thank you!</p>
  <pre><code>  const data: QueryResult = useStaticQuery(query)
  
    return (
      &lt;ThemeProvider theme={theme}&gt;
        &lt;&gt;
          &lt;GlobalStyles /&gt;
          &lt;Wrapper&gt;
            &lt;SideBarInner bg={color} as=&quot;aside&quot; p={[6, 6, 8]}&gt;
              &lt;Flex
                flexWrap=&quot;nowrap&quot;
                flexDirection={['row', 'row', 'row', 'column']}
                alignItems={['center', 'center', 'center', 'flex-start']}
                justifyContent=&quot;space-between&quot;
              &gt;
                &lt;Box width={['3rem', '4rem', '5rem', '8rem']}&gt;
                  &lt;Link to=&quot;/&quot; aria-label=&quot;LekoArts, Back to Home&quot;&gt;
                    &lt;Logo /&gt;
                  &lt;/Link&gt;
                &lt;/Box&gt;
                &lt;Nav
                  color={color}
                  mt={[0, 0, 0, 10]}
                  as=&quot;nav&quot;
                  flexWrap=&quot;nowrap&quot;
                  flexDirection={['row', 'row', 'row', 'column']}
                  alignItems=&quot;flex-start&quot;
                &gt;
                  {data.navigation.nodes.map((item) =&gt; (
                    &lt;PartialNavLink to={item.link} key={item.name}&gt;
                      {item.name}
                    &lt;/PartialNavLink&gt;
                  ))}
                &lt;/Nav&gt;
              &lt;/Flex&gt;
            &lt;/SideBarInner&gt;
            &lt;Main&gt;{children}&lt;/Main&gt;
            &lt;Footer color={color}&gt;
              &lt;Box p={[6, 6, 8]} fontSize={0}&gt;
                little things with love &lt;a href=&quot;https://www.lekoarts.de/en&quot;&gt;LekoArts&lt;/a&gt;.&lt;br /&gt;
                &lt;a href=&quot;https://github.com/LekoArts/gatsby-starter-portfolio-jodie&quot;&gt;Source&lt;/a&gt;.
              &lt;/Box&gt;
            &lt;/Footer&gt;
          &lt;/Wrapper&gt;
        &lt;/&gt;
      &lt;/ThemeProvider&gt;
    )
  }
  
  export default Layout```
  </code></pre>