svg logo not fully displayed in firefox

so this is my svg logo rendered in chrome:

enter image description here

and this is what is display in firefox:

enter image description here

I can't understand why and how it is rendered like this in firefox.

this is the simple code:

<img src="/img/logo.svg" width="150" height="45" alt="MQSB" />.

Does any body know how I can fix that ?

Edit:

This is the rest of the code... But I don't think it would help.

<Navbar className='px-5 mb-5' collapseOnSelect expand="lg" bg="dark" variant="dark">
        <Navbar.Brand as='span'>
            <Link to='/'>
                <img src="/img/logo.svg" width="150" height="45" alt="MQSB" />
            </Link>
        </Navbar.Brand>
        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
        <Navbar.Collapse className='text-center' id="responsive-navbar-nav">
            <Nav className="me-auto">
                {(user && user.token) &&
                    <Link style={{ color: 'white', textDecoration: 'none' }} className='my-1 mx-3' to='/publish-article'>Publier</Link>
                }
                <Link style={{ color: 'white', textDecoration: 'none' }} className='mx-3 my-1' to='/search-article'>Naviguer</Link>
                <Link style={{ color: 'white', textDecoration: 'none' }} className='mx-3 my-1' to='/quizz'>Quizz</Link>
                <Link style={{ color: 'white', textDecoration: 'none' }} className='mx-3 my-1' to='/about'>À propos</Link>
                <Link style={{ color: 'white', textDecoration: 'none' }} className='mx-3 my-1' to='/contact'>Contact</Link>
            </Nav>
            <Nav>
                {(user && user.token) ? <>
                    <NavDropdown align="end" className='text-primary text-center' title={user.infos.username} id="collasible-nav-dropdown">
                        <Link className='text-center' to='/account/settings' style={{ color: 'black', textDecoration: 'none' }}>
                            <NavDropdown.Item as='span'>
                                Mon compte
                            </NavDropdown.Item>
                        </Link>
                        <NavDropdown.Divider />
                        <NavDropdown.Item className='text-center' onClick={logOut}>Déconnexion</NavDropdown.Item>
                    </NavDropdown>
                </> : <>
                    <NavDropdown className='text-primary' align="end" style={{ color: 'black' }} title="Mon compte" id="collasible-nav-dropdown">
                        <Link to='/login' style={{ color: 'black', textDecoration: 'none' }}>
                            <NavDropdown.Item as='span' className='text-center'>
                                Connexion
                            </NavDropdown.Item>
                        </Link>
                        <Link to='/register' style={{ color: 'black', textDecoration: 'none' }}>
                            <NavDropdown.Item as='span' className='text-center'>
                                Inscription
                            </NavDropdown.Item>
                        </Link>
                    </NavDropdown>
                </>}
            </Nav>
        </Navbar.Collapse>
    </Navbar >

Solution 1:

The problem is not in page HTML/CSS or whatever.

There is probably wrong scaling of the inner images.

  1. Open the URL of the image in FireFox https://monquartiersebouge.fr/img/logo.svg
  2. Open the Inspector CTRL+Shift+I
  3. Navigate to svg > defs > image#img2
  4. Set the actual width 1522 to some lower number such as 1100
  5. Now the svg image will be shown in full range without cropping

<image id="img2" width="1100" height="409" preserveAspectRatio="none" xlink:href="data:image/png;...." />

So review the source image and align inner image dimensions.