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

svg css John Dangerous
fonte
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

Não tenho certeza do que todos tentaram. Mas você já brincou com a renderização de formas: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering .

Perguntas semelhantes: /programming/11895813/svg-shape-rendering-on-ios

/programming/16889078/turn-off-anti-aliasing-on-svg-when-applying-css3zoom-on-the-element

Kukka
fonte
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