Pular para o conteúdo principal

GOOD MOOD parte 4: proporção de pixel

· Leitura de 2 minutos

Na quarta parte, faço comparações entre navegadores e proporções de pixel.


Proporção de pixel

Proporções de pixel diferentes podem fazer com que o SVG seja renderizado de forma diferente depedendo do navegador.

Testes executados no macOS 11.7.

Chrome 106.0.5249.119

O Chrome renderiza os filtros de forma parecida em ambas as proporções de pixel, mas as cores mudam um pouco.

Chrome 1x

Chrome proporção de pixel 1x

Chrome 2x

Chrome proporção de pixel 2x

Firefox 105.0.3

Em ambas as proporções de pixel, o Firefox renderiza o filtro de desfoque um pouco mais forte que o Chrome. As cores parecem não mudar de uma proporção de pixel para outra.

Firefox 1x

Firefox proporção de pixel 1x

Firefox 2x

Firefox proporção de pixel 2x

Safari 16.0

Em 1x, o Safari renderiza o filtro de desfoque ainda mais forte que o Firefox. Em 2x, a renderização fica bem parecida com a do Chrome. As cores parecem não mudar de uma proporção de pixel para outra.

Safari 1x

Safari proporção de pixel 1x

Safari 2x

Safari proporção de pixel 2x

Conclusão

Até onde sei, não existe uma forma de definir valores de filtro de acordo com a proporção de pixel da tela, a não ser que JavaScript seja adicionado.

Dessa forma, apenas defini valores de filtro que façam com que o SVG seja renderizado de forma parecida em diferentes navegadores e proporções de pixel.

Na conclusão, escrevo meus pensamentos finais: Conclusão GOOD MOOD: animação com SVG.

Leitura recomendada