.svg immagine sfocata a specifici livelli di zoom in Chrome

Question

Ho deciso di avere il mio logo del sito come un svg, ma non sembra che il rendering sia ben eseguito in chrome. Al livello di zoom del 100% appare sfocato ma se faccio lo zoom indietro alcune volte sembra tutto a posto. Ecco il sito che sto usando su:

www.confide.re/confide

Qualcuno sa che cosa potrebbe causare questo e come risolvere il problema? Grazie

Ho realizzato lo svg in Illustrator CS5, se questo è importante.

Answer 1

La ragione è che si utilizza percentuale per impostare la larghezza dell'elemento del logo è a (elemento principale)

Questo significa che il logo viene prima rasterizzato da vettoriale a una bitmap interna che è 100 % della dimensione impostata per l'immagine. Quindi nella tua regola #header css stai utilizzando l'80% per l'elemento di intestazione in cui si trova l'immagine.

Ciò che accade è che la bitmap interna utilizzata dal browser per contenere l'immagine vettoriale rasterizzata viene ridimensionata dal 100% all'80% anziché rasterizzare il vettore. Poiché ciò comporta l'interpolazione, si avranno dei bordi sfocati. Questa è una scelta prestazionale operata dai browser per i contenuti dei genitori.

La soluzione è rimuovere il ridimensionamento dell'80% dell'elemento di intestazione (padre). Puoi aggiungere una nuova regola e impostare la larghezza dell'immagine in questo modo (ovviamente puoi usare la percentuale - purché l'elemento genitore non sia ridimensionato non sarà un problema) - f.ex:

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

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

Poi, nel tuo codice html:

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

(si sarebbe potuto impostare #header img {...} ma questo ha una riduzione delle prestazioni).

Ecco proof-of-concept (una piccola differenza 100 a 80%, ma visibile - confrontare l'ultima parte):

utilizzando il 100% bitmap rasterizzato per dimensioni logo scalato dal browser al 80%:

Rimozione 80% da elemento di intestazione (madre) e per fare un esempio impostando larghezza e 200px:

Answer 2

Non credo che ci sia un problema con il tuo SVG in quanto è al 100% vettoriale (senza fiches PNG incorporate).

La causa più probabile è la dimensione relativamente piccola dell'immagine e il suo rendering a 72 dpi (una densità di pixel dello schermo normale). I bordi irregolari del tuo font vengono pixelizzati, il che fa apparire leggermente sfocata l'immagine.

Su una MacBook Pro ad alta risoluzione e retina per iPhone, il tuo logo sembra bello e nitido.

Si ingrandisce anche OK.

Answer 3

mettere questo codice nella pagina che utilizza Panzoom:

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