Did you know that the Stackoverflow logo is actually an <a> element with a SVG image as its background?
#hlogo a {
text-indent: -999em;
display: block;
width: 200px;
height: 50px;
background-image: url("img/sprites.png?v=c4222387135a");
background-image: url("img/sprites.svg?v=1bc768be1b3c"),none;
background-position: top left;
background-repeat: no-repeat;
position: relative;
top: 5px;
}
If you check the SVG image using the developer tools in Chrome, it shows a size of 240 * 500 pixels.
However, the <a> element itself has dimensions of 200 * 50 pixels.
This poses the question: how is the size of the SVG image calculated to be 240 * 500 pixels?
Considering that SVG images are scalable and vector-based, the fixed pixel size seems puzzling.
Given the current context of the elements, this discrepancy remains a mystery.