Existe uma razão para o logotipo de Hillary Clinton ter escondido entalhes?

226

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

53

Tecnicamente, este é um esquema de contornar erros. É um pouco surpreendente e perturbador pensar que todas as universidades e fornecedores tradicionais de mecanismos de renderização em 2D cometem o mesmo erro repetidamente, mesmo sabendo a causa, sabemos como corrigi-la e não ser tão prejudicial ao desempenho. em um computador moderno. E nenhuma pessoa com gráficos 3D raramente comete esse erro e o conhece há mais de 30 anos.

— joojaa

6

@NickT Não é um problema de luta, é uma questão de misturar opacidade e cobertura, mas o 3D é muito mais do que jogos. Em 3D, utilizamos multisampling por idades para resolver o problema do aa. A amostragem múltipla (geralmente, mesmo que os resultados não sejam tão pronunciados) não calcula a cobertura e, portanto, não comete o erro de pensar que 50% da cobertura é 25% visível através de outra cobertura de 50%. Embora isso possa ser verdade, o answe também pode ser 50% visível ou nenhum visível. Nesse caso, para evitar confusão, os outros 50% são removidos manualmente, podemos corrigir 3 casos, mas não todos. Não deve ser necessário.

— joojaa

5

É triste que eu tenha reconhecido claramente como evitar um erro de renderização de bordas sobrepostas. Mas o SVG ainda tem 14 anos, então espero que isso seja corrigido algum dia.

— Francisco Presencia 21/06

5

@FranciscoPresencia não é um problema com o SVG, é apenas um problema com a maneira como escolhemos implementar erroneamente as renderizações. Diferentes prestadores SVG têm diferentes gravidade do problema

— joojaa

12

@ DA01 não, a correção ingênua é incrivelmente simples, é menos código que o algoritmo atual. Em vez de fazer o cálculo com base na cobertura, apenas renderize como se você não tivesse antialias em uma resolução mais alta e depois filtre a imagem até a resolução real. Isso nunca será derramado de baixo para cima, pois não pode cometer um erro, pois o elemento mais frontal o oculta completamente. As placas gráficas fazem isso o tempo todo em relação às configurações de x4 x8 x16 aa nas configurações da placa gfx.

— Joojaa

233

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:

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.

— Cai
fonte

6

Na verdade, isso pode ser um grande problema com a impressão. Na impressão digital, pelo menos o svg normalmente é rasterizado antes de ser enviado para a impressora, e os mesmos tipos de artefatos podem aparecer. (último projeto em meu último empregador (impressora comercial grande) envolvido escrevendo software para ajudar a identificar esses tipos de coisas antes do trabalho caro de colocar tinta no papel foi feito.)

— Mr.Mindor

11

Já que estamos falando de política dos EUA, você quer dizer "artefatos"?

— Andrew Rasmussen

5

De acordo com english.se, quero dizer artefatos, não artefatos. (Mas desde que eu sou britânico, quero dizer artefatos independentemente)

— Cai

Raramente existe alguma razão ... apenas curioso: existe alguma razão?

— Alois Mahdal

@AloisMahdal Eu duvido muito.

— Cai

61

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.

— Yakk
fonte

11

Sua descrição se aplica no caso de gráficos que contenham canais alfa ou no desenho de subpixel quando for anti-aliasing. O exemplo de OPs mostrará os artefatos de entalhe para camadas mescladas ao contrário do que se pretende. Sugiro que o problema esteja mais relacionado a erros de registro na impressão.

— Pekka

2

@pekka sim, mas a maioria das renderizações atualmente não tem serrilhado.

— Yakk

Se a camada superior tiver alguma transparência, o entalhe resultará em um retrocesso gradual da camada inferior da borda, impactando na cor do anti-serrilhado e da camada superior. Uma resposta mais apropriada seria ter um desconto retangular (de tamanho difícil de estimar) na área onde a mistura não é desejada. Como você quantifica isso?

— Pekka

@pekka Se a camada superior tiver quantidades médias de transparência, esse problema será bem menos problemático (como você pode ver de qualquer maneira o vermelho sob o azul). À medida que a transparência do topo se aproxima da opacidade, aproxime-se da solução acima. À medida que se afasta da opacidade, aborde a pré-composição. O problema geral é complicado, devido a erros de registro, problemas de construção (muitas camadas!), Anti-aliasing e tudo mais: em algum momento, você deseja escrever vetores personalizados para cada formato de saída ou mover os vetores de alguma forma. Eu simplesmente tentei responder a causa técnica exata do problema que o entalhe resolve.

— Yakk

11

@Pekka é um retângulo mais difícil de desenhar e, em seguida, você termina com o problema oposto do mesmo problema, em que o plano de fundo mostra a calha. O entalhe é uma espécie de compromisso entre um erro e vários outros (o entalhe é para renderização na tela, embora não tenha uma cavidade quadrada é para que a sobreimpressão de chapas possa ser feita, se necessário, com o mínimo de erros). Mas realmente não há razão para que haja uma necessidade de fazer isso, é só que nossos renderizadores funcionam errado, é tudo o que existe. Poderíamos resolver todos os três problemas facilmente, alterando a maneira como rasterizamos.

— Joojaa

48

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 .

— DA01
fonte

16

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.

— Pekka
fonte