svg logo not fully displayed in firefox
so this is my svg logo rendered in chrome:
and this is what is display in firefox:
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.
- Open the URL of the image in FireFox https://monquartiersebouge.fr/img/logo.svg
- Open the Inspector CTRL+Shift+I
- Navigate to
svg > defs > image#img2
- Set the actual width
1522
to some lower number such as1100
- 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.