Perda de qualidade ao reduzir os SVGs

Estou tendo dificuldades para encontrar a melhor maneira de produzir um SVG que mantenha sua qualidade por meio do dimensionamento. O tamanho real da imagem é o tamanho médio, perfeito para pixels no Illustrator. No entanto, depois que eu o salvo como SVG, a linha vertical mais à direita fica embaçada. O que posso fazer para produzir um SVG de melhor qualidade / compatível com a escala?

pequeno

real

ampla

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!

Como outros observaram, a desfocagem é causada pelo anti-aliasing, quando a linha vertical na imagem em escala não cai exatamente no limite de um pixel.

Você pode corrigir isso manualmente em um editor SVG, primeiro escalando sua imagem para o tamanho desejado e, em seguida, aumentando o zoom e ajustando manualmente as linhas para que caiam exatamente nos limites de pixel. (Se você estiver fazendo isso no Inkscape, recomendo configurar uma grade de 0,5 px com cada segunda linha enfatizada nas preferências do documento.)

Como alternativa, você pode achar útil o plug-in PixelSnap Inkscape . Ele automatiza a parte tediosa desse trabalho, alterando automaticamente as linhas para que caiam precisamente nos limites dos pixels. Embora nem sempre faça um trabalho perfeito, geralmente é muito mais fácil deixá-lo fazer o que é necessário e depois limpar todos os resultados abaixo do ideal do que sempre fazer as dicas de pixel completamente manualmente.

Acho que Jonathan Todd deu uma boa explicação teórica e um método geral para evitar desfoque. Gostaria de complementar um vídeo de prática sobre como fazer dicas de pixels no Adobe Illustrator, que encontrei neste artigo .

Vou descrever o método deste vídeo da seguinte forma:

1. Saiba o tamanho do ícone que você deseja mostrar. Se você deseja que ele seja exibido em 16 x 16 pixels, é melhor criar o ícone do mesmo tamanho para obter o efeito ideal. Lembre-se de que é melhor criar ícones personalizados no tamanho exato que você precisa.

2. Use o Adobe Illustrator para abrir o arquivo de ícone SVG e editá-lo. Dois triângulos são ambos formato SVG, mas um tem um bom alinhamento com uma grade virtual que não será desfocada quando mostrada na tela.

3. Para editar seu ícone de desfoque, você primeiro define sua unidade de imagem em pixels. Eu acho que isso é diferente no Windows e no Mac OS, então é melhor pesquisar no Google.

4. Design com dicas de pixel ativadas. ( alt+ ⌘+ Yno mac ou alt+ ctrl+ Yno Windows) era possível ver os pixels da borda horizontal e vertical do triângulo esquerdo alinharem perfeitamente a grade, enquanto o pixel da borda horizontal do triângulo direito não.
   
   

5. Altere a largura e a altura primeiro e altere X e Y para eliminar a parte decimal. Eu sugiro que você edite a largura e a altura primeiro e depois modifique as coordenadas x e y.

alterar valores decimais

para arredondar números (sem frações decimais)

6. Voila. Salve sua imagem para uso!

Talvez este link seja útil para solucionar seu problema, http://theindustry.cc/2012/10/17/designed-pixel-hinting/