Esta questão não é de forma alguma política!
Enquanto olhava para a versão SVG do logotipo de Hillary encontrada aqui , notei que havia entalhes nas duas barras verticais do H. A barra da seta cobre os entalhes para que eles não sejam vistos ao visualizar o logotipo. Mas estou muito curioso por que o designer pode ter colocado esses entalhes. Alguém sabe?
logo
svg
best-practice
IJ Kennedy
fonte
fonte
Respostas:
Para evitar possíveis artefatos de renderização.
Sem os entalhes, é provável que você veja as bordas das formas inferiores, onde elas se encontram com as bordas das formas de sobreposição (na tela de qualquer maneira, não é realmente um problema ao imprimir).
Você pode ver exemplos e explicações dos possíveis artefatos aqui:
A imagem parece em relevo quando convertida para SVG
Como colocar um objeto na frente e atrás de outro objeto ao mesmo tempo?
Raramente existe uma razão para ter arestas perfeitamente alinhadas que causem artefatos como esse; portanto, usar "entalhes" como no logotipo de Hillary é um bom hábito.
fonte
Compreender a rasterização e o algoritmo do pintor pode ajudar.
Uma maneira de renderizar gráficos vetoriais (gráficos definidos por polígonos, em vez de pixels) em pixels é rasterizar os polígonos enquanto executa o algoritmo do pintor.
O algoritmo do pintor é um processo de baixo para cima, em que você coloca o fundo pela primeira vez e depois desenha sobre esse fundo com cada camada de cor até chegar à camada superior.
Ao depositar uma camada, preste atenção à sua cobertura (geralmente armazenada em um canal extra, o canal alfa) e use-a para misturar a cor adicionada com o que já existe.
Se sua nova camada cobrir um pixel em 50% e for azul, você calcula a média da cor atual desse pixel com azul e desenha-a lá.
As coisas ficam um pouco mais complexas se você estiver criando uma imagem com transparência, mas não fundamentalmente.
Rasterização é o processo de transformar um polígono em pixels. Aqui, calculamos quanto o polígono cobre um determinado pixel usando alguma álgebra e calculamos um valor de cobertura.
Se você tem duas arestas de um polígono coincidentes - exatamente uma em cima da outra - mas ambas cobrem metade de um determinado pixel, o que acontece é um problema.
Suponha que o polígono inferior seja vermelho e o topo azul e o fundo seja branco.
Primeiro nós pintamos o vermelho. Isso se mistura com o branco, levando a 50% de branco e 50% de vermelho.
Depois pintamos o azul. Isso se mistura com o 50% branco 50% vermelho e temos 25% branco 25% vermelho 50% azul. O mesmo acontece se vermelho e azul se encontrarem no meio ou se o azul cobrir completamente o vermelho.
Mas "na realidade" o polígono azul cobriu completamente o vermelho, então por que o estamos vendo? Porque o algoritmo esquece detalhes de posicionamento de sub-pixel.
Contanto que haja 100% de cobertura de um polígono, isso não é um problema.
Agora, esse problema não é fundamental. Você pode fazer a renderização de polígono com uma abordagem do tipo traçado de raio (onde você renderiza demais por um fator de N ^ 2 em pontos) ou mesmo uma abordagem de vetor puro (onde você subtrai formas de bloqueio da geometria das formas em cortando-os). Em nenhum dos casos, as cores "ocultas" vazam para a imagem de saída.
O algoritmo do pintor não é o único caso em que a geometria "oculta" pode vazar. Se você estiver imprimindo com mídia opaca, às vezes as camadas de cores não estão perfeitamente alinhadas. Portanto, as subcamadas vazam quando a camada superior deve cobri-la completamente.
Como você não sabe como sua imagem vetorial será impressa, entalhes como esse permitem criar imagens mais robustas contra técnicas imperfeitas de impressão / exibição.
fonte
Cai está correto. Eu pensei em adicionar uma resposta visual também.
A razão pela qual isso acontece é que é um SVG. Ao contrário de uma imagem rasterizada em que você controla cada pixel renderizado, a rasterização do SVG acontece no navegador ... para que o navegador tome essas decisões.
Uma das decisões que o navegador precisa tomar é quando executar a suavização de serrilhado. Isso normalmente ocorre quando um ponto ao longo de uma linha cai em um pixel. Ele então fará um anti-alias desse pixel. Como ele renderizará todas as camadas do SVG, isso será feito em cada camada e é aí que você poderá começar a obter os artefatos de borda. Isso é especialmente verdade quando você brinca com o zoom do SVG, pois isso fará com que ele se sobreponha a diferentes pixels da tela.
Aqui está uma captura de tela de uma caixa verde sobreposta a uma caixa vermelha no Chrome. A parte superior está com 100% de zoom da página e a parte inferior é ampliada. Observe a diferença na renderização dessa borda:
Se eu capturar essa imagem e aumentar o zoom para mostrar a rasterização, você poderá ter uma imagem mais clara do que está acontecendo:
A solução ideal aqui seria que o rasterizador SVG no navegador fosse 'mais inteligente' e não renderizasse coisas empilhadas, mas, como os elementos SVG podem ser manipulados externamente e ao vivo (como é apenas um arquivo XML), não é uma solução prática para o navegador.
Portanto, o designer toma essa decisão usando os entalhes que você vê.
A propósito, isso é semelhante em conceito a como lidar com o registro na impressão usando trapping .
fonte
A impressão em várias cores requer um registro preciso para evitar lacunas desagradáveis e é uma preocupação quando os artefatos são compostos de várias fontes. Preocupações semelhantes podem ocorrer mesmo em produtos digitais, onde a aritmética de precisão limitada necessariamente introduz erros.
O problema a ser evitado é o trapping inverso - onde o desvio do gráfico pretendido pode resultar em uma linha fina da cor de fundo exibida à esquerda das bordas coincidentes verticais. Como as cores são altamente contrastantes, o impacto será perceptível (tente mover a linha quebrada até 1 pixel para a esquerda da vertical.
A abordagem não se destina a impactar a mistura de tintas. As coordenadas consistentes na tela evitam o problema, enquanto o meio-tom é usado para gerenciar as cores.
fonte