1

I have an svg logo that is blurry on non-retina screens:

html:

<img src="/dist/images/logos/color-logo.svg"  class="nav-color-logo">

css:

.nav-color-logo {
    width: 123px;
    height: auto;
    position: relative;
    left: 14px;
}

Could anything I'm doing with the css be affecting it? It's sized is not constrained at all by its containing box

Also, the intrinsic dimensions of the image are 166x53, so the 'width: 123px' declaration does seem to be causing the height to have a decimal value- is that a problem? If so, the weird thing is that it displays crisply on my local, it's only blurry when sent from the server

This post makes me wonder if it's positioning or sizing could be in play: svg not sharp, but blurry

Paulie_D
  • 107,962
  • 13
  • 142
  • 161
kdub1312
  • 803
  • 2
  • 9
  • 19
  • 1
    I have had this issue before where if a shape sits half on a pixel then you will get anti-aliasing from the renderer. Try adjusting this first so we can rule this out for you. Also there is some CSS you can add to turn off anti-aliasing. I found this solution: https://stackoverflow.com/questions/14068103/disable-antialising-when-scaling-images – Bromox Sep 15 '20 at 12:04
  • Try `transform: translate3d(0,0,0);` on that SVG but at best check which parent element causes that blur. Maybe use some browser resets, e.g. https://github.com/sindresorhus/modern-normalize – muuvmuuv Sep 15 '20 at 12:10
  • 1
    can you post your svg so we have a look at it? – ArnaudV Sep 15 '20 at 12:46
  • @Bromox I do feel like this could be related to a half pixel issue, but I don't understand how to identify that- do you have a reference? – kdub1312 Sep 15 '20 at 16:09

0 Answers0