.vg obraz rozmazany przy określonych poziomach powiększenia w Chrome

Question

Zdecydowałem się na logo mojej strony jako svg, ale wygląda na to, że nie jest ładnie renderowane w chrome. Przy powiększeniu 100% wygląda na zamazany, ale jeśli kilka razy pomniejszę, to wygląda dobrze. Oto strona Używam go na:

www.confide.re/confide

Czy ktoś wie co może być tego przyczyną i jak to naprawić? Dzięki

Zrobiłem svg w Illustratorze CS5, jeśli to ma znaczenie.

Answer 1

Powodem jest to, że można użyć procent ustawić szerokość elementu logo znajduje się w (element nadrzędny)

To oznacza, że ​​logo najpierw zrastrowane od wektora, który ma wewnętrzny mapę bitową, która jest 100 % rozmiaru ustawionego dla obrazu. Następnie w regule #header css używasz 80% dla elementu nagłówka, w którym znajduje się obraz.

Co się dzieje, to że wewnętrzna mapa bitowa używana przez przeglądarkę do przechowywania zrasteryzowanego obrazu wektorowego jest skalowana od 100% do 80% zamiast ponownego rasteryzacji wektora. Ponieważ wiąże się to z interpolacją, spowoduje to kilka rozmytych krawędzi. Jest to wybór wydajności dokonany przez przeglądarki dla zawartości rodzica.

Rozwiązaniem jest usunięcie skalowania 80% elementu nagłówka (rodzica). Możesz dodać nową regułę i ustawić szerokość obrazu w ten sposób (możesz oczywiście użyć wartości procentowej - o ile element główny nie jest skalowany, nie będzie to problemem) - f.ex:

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

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

Następnie w hTML-kodu:

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

(mogłeś ustawić #header img {...} ale to ma spadku wydajności).

Oto proof-of-concept (mała różnica 100 do 80%, ale widoczne - porównaj ostatnią część):

stosując 100% zrasteryzowany bitmapę do logo wielkości skalowane przez przeglądarkę do 80%:

usunięcie 80% z nagłówka (macierzystego) elementu i dla zapewnienia przykład ustawienie szerokości obrazu do 200px:

Answer 2

Nie wierzę, że problem dotyczy SVG, ponieważ jest to w 100% wektor (bez osadzonych PNG).

Najbardziej prawdopodobną przyczyną jest stosunkowo mały rozmiar obrazu i jego rozdzielczość w rozdzielczości 72 dpi (regularne zagęszczenie pikseli). Nieregularne krawędzie czcionki są pikselowane, co powoduje, że obraz wygląda nieco rozmazany.

W przypadku wysokiej rozdzielczości MacBook Pro i iPhone'a Retina logo wygląda dobrze i jest wyraźne.

To również powiększa OK.

Answer 3

Umieść ten kod na stronie, która używa Panzoom:

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