Imagens SVG aparecendo borradas no Safari em qualquer tamanho menor que 20 px


7

Estou fazendo uma demonstração móvel para o Ipad que estamos demonstrando no Safari. Estou usando ícones para evitar ter que dimensionar minhas imagens em 3x. O problema é que todos os ícones que estou usando menores que 20 px ficam embaçados na tela até você aumentar o zoom. Alguém mais teve esse problema e sabe qual é a correção? Para sua informação, salvei essas imagens no Illustrator


2
As imagens pequenas provavelmente têm tanto efeito antialias quanto as grandes, mas a proporção de pixels "desfocados" versus pixels preenchidos é logicamente maior. Imagine sua imagem em 4x4 pixels; então, não pixels totalmente preenchidos. Com falta de desativar o antialiasing (do qual eu não sei se possível, e não recomendaria de qualquer maneira), não há muito o que corrigir.
usr2564301

Eu tenho testado as coisas ao longo do dia. O problema de 20 px funcionava apenas com algumas imagens .svg. As coisas que fiz no ilustrador e salvei como svg não pareciam tão boas quanto alguns dos gráficos .svg que salvei no Illustrator. Talvez algumas das configurações que eu escolhi não sejam ótimas. Fiz o check-in no Chrome e no Ffox e tudo parecia muito nítido, então esse problema de antialiasing está apenas no Safari. Vou ter que ver se o Safari no PC é processado da mesma maneira e mais importante no Tablet.
John Dangerous

Respostas:


1

Obrigado por compartilhar. Eu vou ler. Tudo parecia bom para mim no Safari no iPad assim que tudo é bom, mas o Safari no ambiente de trabalho não estava olhando tão bom na minha opinião, mas não tinha importância para esta demo
John Dangerous

11
Encontrei este artigo sobre como diferentes navegadores exibem SVG. opticalcortex.com/svg-rendering-in-browsers
John Dangerous
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.