The issue arises when using a percentage to define the width of the parent element containing the logo.
When this approach is taken, the browser first converts the vector image into an internal bitmap that matches the size specified for the image. Subsequently, the header element with a width of 80% encompasses the image.
Instead of re-rendering the vector, the browser scales the existing internal bitmap from 100% to 80%, resulting in slightly blurry edges due to interpolation. Browsers make this optimization decision for better performance of the parent's content.
To resolve this problem, it is recommended to eliminate the 80% scaling from the header (parent) element. Here's an alternative CSS rule that sets the image width explicitly:
#header {
margin: 0 auto;
padding: 0;
text-align: center;
}
.header-img {
width:200px;
height:auto;
}
In the HTML code, place the image like this:
<img class="header-img" src="logo.svg" alt="" />
(While you could use #header img {...}, it may impact performance negatively).
Here's a demonstration showcasing the difference between a 100% and 80% scaled rasterized bitmap for the logo:
Using a 100% rasterized bitmap for the logo size, subsequently scaled by the browser to 80%:
After removing the 80% scaling from the header (parent) element and setting the image width to 200px as an example: