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