.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.

Solution 1

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.

Solution 2

Put this code on the page that is using Panzoom:

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

Comments

[Instine]

This solved our similar issue. Thank you! Now it would be nice to understand the reason for the fix :) Do you happen to know?