.svg image blurry at specific zoom levels in Chrome

Question

I've decided to have my site logo as an svg, but it doesn't seem to be rendering nicely in chrome. At the 100% zoom level it looks blurry but if I zoom out a few times then it looks alright. Here is the site I'm using it on:

www.confide.re/confide

Does anyone know what might be causing this and how to fix it? Thanks

I made the svg in Illustrator CS5, if that matters.

Your logo is perfectly crisp and looks good at 100%. You can't get better without losing antialiasing or drawing a bitmap image. — John Dvorak, Jan 05 '13 at 11:59

score 13 · Accepted Answer · 2013-01-05T14:36:54.453

The reason is that you use percentage to set the width of element the logo is in (parent element)

This means the logo is first rasterized from vector to an internal bitmap that is 100% of the size you set for the image. Then in your #header css rule you are using 80% for the header element which the image is inside.

What happens is that the internal bitmap the browser use to hold the rasterized vector image is scaled from 100% to 80% instead of re-rasterizing the vector. As this involves interpolation it will result in some blurry edges. This is a performance choice made by the browsers for parent's content.

The solution is to remove the 80% scaling of the header (parent) element. You can add a new rule and set the image width like this (you can of course use percentage instead - as long as the parent element isn't scaled this won't be an issue) - f.ex:

#header {
    margin: 0 auto;
    padding: 0;
    text-align: center;
    /*width: 80%;*/
}

.header-img {
    width:200px;
    height:auto;
    }

Then in your html-code:

<img class="header-img" src="logo.svg" alt="" />

(you could have set #header img {...} but this has a performance penalty).

Here is proof-of-concept (a small difference 100 to 80%, but visible - compare the last part):

Using 100% rasterized bitmap for logo size scaled by browser to 80%:

enter image description here

Removing 80% from header (parent) element and for sake of example setting image width to 200px:

enter image description here

Thanks, I want it to scale according to the screen size though (for mobile) - is there any way I can use px and % ? — Taimur, Jan 05 '13 at 12:21
I updated my answer with a solution too. Of course, adjust the width as you please - I just put in an initial value to start with. — , Jan 05 '13 at 12:26

score 1 · Answer 2 · answered Jan 05 '13 at 12:00

I don't believe that there is an issue with your SVG as it is 100% vector (no embedded PNG fies).

The most likely cause is the relatively small size of your image and how it renders at 72 dpi (a regular screen pixel density). The irregular edges of your font are being pixelised which is causing the image to look slightly blurred.

On a high resolution MacBook pro and iPhone retina, your logo looks fine and crisp.

It zooms up OK too.

enter image description here

score 1 · Answer 3 · answered Jan 20 '16 at 14:22

1

Put this code on the page that is using Panzoom:

<style>
        .panzoom {
            -webkit-backface-visibility: initial !important;
            -webkit-transform-origin: 50% 50%;
        }
</style>

answered Jan 20 '16 at 14:22

Thiago Araújo

800
9
8

This solved our similar issue. Thank you! Now it would be nice to understand the reason for the fix :) Do you happen to know? – Instine Feb 02 '16 at 14:43

.svg image blurry at specific zoom levels in Chrome

3 Answers3

Linked