Description: A button containing an SVG image is not displaying correctly.
Site: Google News
OS: MacOS Sonoma 14.2.1
Version: Master with latest commit bd97442
Screenshots:
Firefox | Ladybird |
---|---|
Code to reproduce:
<!DOCTYPE html>
<html>
<head></head>
<body>
<form class="container">
<div class="search-box"></div>
<button class="sample-button" role="button">
<svg height="24px" width="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M20.49,19l-5.73-5.73C15.53,12.2,16,10.91,16,9.5C16,5.91,13.09,3,9.5,3S3,5.91,3,9.5C3,13.09,5.91,16,9.5,16 c1.41,0,2.7-0.47,3.77-1.24L19,20.49L20.49,19z M5,9.5C5,7.01,7.01,5,9.5,5S14,7.01,14,9.5S11.99,14,9.5,14S5,11.99,5,9.5z"></path>
<path d="M0,0h24v24H0V0z" fill="none"></path>
</svg>
</button>
</form>
</body>
<style>
.container {
border: 1px solid #FF0000;
position: relative;
border-radius: 8px;
}
.sample-button {
float: left;
position: absolute;
top: 0;
padding: 0 5px;
cursor: pointer;
}
svg {
padding: 8px;
margin: 3px;
}
.search-box {
height: 46px;
}
</style>
</html>
Firefox | Ladybird |
---|---|
It looks like in general there are some issues displaying SVGs, is that a known issue? In the same website, the Google logo is an SVG image loaded from a URL in a :before
and it's not displaying.
Pay now to fund the work behind this issue.
Get updates on progress being made.
Maintainer is rewarded once the issue is completed.
You're funding impactful open source efforts
You want to contribute to this effort
You want to get funding like this too