SVG Mantém 100% de qualidade da fonte
Os dados de uma imagem SVG são armazenados como XML em vez de pixels e consistem em componentes que podem ser dimensionados para qualquer nível sem perder a qualidade da fonte .
Resolução da tela
À medida que o gráfico se torna menor na tela, ele tem cada vez menos pixels para representar sua origem (que ainda está em perfeita qualidade), fazendo com que a imagem pareça menos nítida.
Anti-aliasing
A imagem grande (esquerda) e a pequena (direita) são suavizadas (veja a cor leve e sutil usada nas bordas?).
A suavização de serrilhado é uma técnica usada na renderização de imagens que sacrifica a nitidez para evitar bordas irregulares e feias. Essa técnica usada para manter as bordas suaves é a razão da baixa qualidade da imagem menor. Por causa da baixa resolução, o anti-aliasing é muito mais óbvio aqui, e é usado até nas bordas verticais.
Suspeito que isso aconteça no processo de suavização de serrilhado, porque é difícil fazê-lo de maneira diferente ou pela uniformidade da imagem. Se as bordas diagonais estivessem ligeiramente desfocadas devido ao anti-aliasing e as verticais não, não seria um efeito muito equilibrado.
O antialiasing é uma espécie de herói desconhecido nos gráficos da web; é por isso que temos texto claro e formas vetoriais suaves em nossas telas. Atualmente, existem algumas abordagens ao antialiasing usadas nos navegadores hoje em dia, que são mais óbvias quando se trata de renderização de texto. Quando o algoritmo usado para antialização muda, ele pode levar a resultados visuais inesperados. Neste artigo, vamos dar uma olhada nas abordagens do antialiasing e ver como os pixels são desenhados.
Todas as nossas telas são compostas, como todos sabemos, por pixels. É uma grade gigante de blocos e cada um contém componentes vermelhos, verdes e azuis (RGB). À distância, vemos imagens, texto e ícones, mas, de perto, podemos ver a grade dos componentes RGB e como tudo é feito.
Então, o que acontece quando estamos desenhando uma forma vetorial e ela passa pela "parte" de um pixel? Vamos supor que a forma que estamos desenhando seja preta e o fundo branco. Devemos colorir esse pixel? Se pintarmos, que cor deve ser? Preto, cinza, alguma outra coisa?
- Artigo de origem por HTML5 Rocks
A solução
Dica de pixel. Conforme vinculado pelo novo usuário abaixo, a dica de pixel é exatamente o que você precisa e a resposta adequada à sua pergunta. O anti-aliasing trata cada ponta como uma unha, esmagando e suavizando sem restrições. A menos que você dê dicas!
Como isso é feito...
Primeiro, abra o documento que contém a forma do vetor que você deseja sugerir aos pixels. Essa técnica funciona muito bem se você estiver trabalhando em vetor, mas se estiver trabalhando com formas de varredura, a dica de pixel é gerenciável - mas apenas para os avançados. Então, vamos ficar com formas vetoriais por enquanto.
Segundo, amplie o máximo que puder até ver uma grade de pixels. Se você acha que ampliou o suficiente, mas ainda não consegue ver a grade de pixels, sugiro que você altere algumas configurações e preferências para ativá-la. Se estiver ativado e você puder vê-lo, selecione o caminho / forma do vetor.
Terceiro, selecione pontos no caminho do vetor e mova os pixels com as teclas de seta em incrementos de minutos. Alguns aplicativos exigem que você mantenha pressionado um botão, outros não. Contanto que você saiba que os caminhos não estão apenas mudando um pixel para cima - porque você gostaria que eles mudassem, no máximo, meio pixel para cima.
Quarto, faça o mesmo nos demais pontos do vetor até que tudo pareça menos desfocado ao diminuir o zoom. Quando terminar, agora você pode aplicar estilos, gradientes, sombras, etc., nítidos e “perfeitos para pixels”, como faria normalmente com uma forma vetorial.
Por fim, se você estiver pensando em ir além com essa técnica, tente cutucar pontos vetoriais em ícones que parecem "muito" nítidos. Às vezes, uma curva pode parecer muito melhor borrada do que quando está crocante.
- Artigo fonte da The Industry, cortesia de tareq-a.
A sugestão de pixel com formas vetoriais indica ao sistema de renderização a intenção da borda, de modo que o anti-aliasing sabe se deve ou não balançar seu martelo de suavização!
