C'è una ragione per cui il logo di Hillary Clinton ha delle tacche nascoste?

226

Questa domanda non è minimamente politica!

Mentre guardavo la versione SVG del logo di Hillary trovata qui , ho notato che c'erano due tacche nelle due barre verticali dell'H. La barra a croce copre le tacche in modo che non si vedano quando si visualizza il logo. Ma sono molto curioso di sapere perché il designer potrebbe aver messo queste tacche. Qualcuno lo sa?

logo svg best-practice

— IJ Kennedy
fonte

53

Tecnicamente si tratta di uno schema di elusione dei bug. È un po 'sorprendente e inquietante pensare che tutte le università e i principali fornitori di motori di rendering 2D facciano lo stesso errore più e più volte, anche se conosciamo la causa, sappiamo come risolverlo e non è un grande successo di prestazioni su un computer moderno. E nessuna persona di grafica 3D fa raramente questo errore e lo sa da oltre 30 anni.

— joojaa,

6

@NickT Non è un problema di combattimento, è un problema di mescolare opacità e copertura, ma il 3D è molto più che un gioco. In 3D abbiamo usato per secoli il multisampling per risolvere il problema di aa. Il multicampionamento (di solito, anche se i risultati non sarebbero così pronunciati) non calcola la copertura e quindi non fa l'errore di pensare che la copertura del 50% sia visibile al 25% attraverso un'altra copertura del 50%. Anche se questo può essere vero, la risposta può anche essere il 50% visibile o nessuno visibile. In questo caso, per evitare confusione, l'altro 50% viene rimosso manualmente, possiamo riparare 3 casi ma non tutti. Non dovrebbe essere necessario.

— joojaa,

5

È triste che l'ho riconosciuto chiaramente per evitare un errore di rendering dei bordi sovrapposti. Ma SVG ha ancora 14 anni, quindi spero che un giorno venga risolto.

— Francisco Presencia,

5

@FranciscoPresencia non è un problema con SVG è solo un problema con il modo in cui scegliamo di implementare erroneamente i render. Diversi renderer SVG hanno una gravità diversa di questo problema

— joojaa,

12

@ DA01 no la soluzione ingenua è incredibilmente semplice, è meno codice dell'algoritmo corrente. Invece di eseguire calcoli basati sulla copertura, esegui il rendering come se non avessi affatto antialias con una risoluzione più alta, quindi filtra l'immagine fino alla risoluzione reale. Questo non si riverserà mai dal basso verso l'alto dal momento che non può commettere un errore l'elemento più anteriore lo oscura del tutto. Le schede grafiche fanno tutto questo per tutto ciò che riguarda le impostazioni di x4 x8 x16 aa nelle impostazioni della scheda gfx.

— joojaa,

233

Per evitare possibili artefatti di rendering.

Senza le tacche è probabile che tu veda i bordi delle forme inferiori dove incontrano i bordi delle forme sovrapposte (sullo schermo comunque, non è davvero un problema durante la stampa).

Puoi vedere esempi e spiegazioni dei possibili artefatti qui:

Raramente ci sono ragioni per avere bordi perfettamente allineati che potrebbero causare artefatti del genere, quindi usare "tacche" come nel logo di Hillary è una buona abitudine.

— Cai
fonte

6

Questo può effettivamente essere un grosso problema con la stampa. Nella stampa digitale almeno lo svg verrà tipicamente rasterizzato prima di essere inviato alla stampante e potrebbero apparire gli stessi tipi di artefatti. (l'ultimo progetto del mio ultimo datore di lavoro (grande stampante commerciale) prevedeva la scrittura di software per aiutare a identificare questo genere di cose prima che fosse fatto il costoso lavoro di stampa dell'inchiostro sulla carta.)

— Mr.Mindor,

1

Dal momento che stiamo parlando di politica americana, intendi "artefatti"?

— Andrew Rasmussen,

5

Secondo english.se intendo artefatti, non artefatti. (Ma dato che sono britannico, intendo manufatti a prescindere)

— Cai

Raramente c'è qualche motivo ... solo curioso: c'è mai un motivo?

— Alois Mahdal,

@AloisMahdal Ne dubito moltissimo.

— Cai,

61

La comprensione della rasterizzazione e l'algoritmo del pittore potrebbero aiutare.

Un modo di rendere grafica vettoriale (grafica definita da poligoni, anziché pixel) è di rasterizzare i poligoni durante l'esecuzione dell'algoritmo del pittore.

L'algoritmo del pittore è un processo dal basso verso l'alto in cui prima si appoggia lo sfondo, quindi si disegna sopra quello sfondo con ogni strato di colore fino a raggiungere il livello superiore.

Quando depositi un livello, presti attenzione alla sua copertura (di solito memorizzata in un canale aggiuntivo, il canale alfa) e lo usi per mescolare il colore aggiunto con ciò che è già lì.

Se il tuo nuovo livello copre un pixel del 50% ed è blu, fai la media del colore corrente di quel pixel con il blu e lo disegna invece lì.

Le cose diventano un po 'più complesse se stai creando un'immagine con trasparenza, ma non fondamentalmente.

La rasterizzazione è il processo di trasformazione di un poligono in pixel. Qui, scopriamo quanto il poligono copre un dato pixel usando un po 'di algebra, quindi calcoliamo un importo di copertura.

Se hai due spigoli di un poligono coincidenti - esattamente uno sopra l'altro - ma entrambi coprono a metà un dato pixel, ciò che accade è un problema.

Supponiamo che il poligono inferiore sia rosso e quello superiore blu e lo sfondo sia bianco.

Per prima cosa dipingiamo il rosso. Questo si mescola al bianco, portando al 50% bianco al 50% rosso.

Quindi dipingiamo il blu. Questo si mescola con il 50% bianco 50% rosso e otteniamo il 25% bianco 25% rosso 50% blu. La stessa cosa accade se il rosso e il blu si incontrano nel mezzo o se il blu copre completamente il rosso.

Ma "in realtà" il poligono blu copriva completamente quello rosso, quindi perché lo vediamo? Perché l'algoritmo dimentica i dettagli di posizionamento dei sub-pixel.

Finché esiste una copertura del 100% di un poligono, questo non è un problema.

Ora, questo problema non è fondamentale. È possibile eseguire il rendering poligonale con un approccio simile al ray tracing (in cui si esegue il rendering eccessivo di un fattore di N ^ 2 in punti) o anche un approccio simile al vettore puro (in cui si sottrae le forme di blocco dalla geometria delle forme in loro, tagliandoli). In entrambi i casi i colori "nascosti" non penetrano nell'immagine in uscita.

L'algoritmo del pittore non è l'unico caso in cui la geometria "nascosta" può penetrare. Se si stampa con supporti opachi, a volte i livelli di colore non sono perfettamente allineati. Quindi i sottostrati perdono quando lo strato superiore dovrebbe coprirlo completamente.

Poiché non sai come verrà generata l'immagine vettoriale, tacche del genere ti consentono di creare immagini più robuste rispetto a tecniche di stampa / visualizzazione imperfette.

— Yakk
fonte

1

La tua descrizione si applica nel caso di grafici contenenti canali alfa o nel caso di disegni subpixel durante l'antialiasing. L'esempio dei PO mostrerà gli artefatti di notch per i livelli misti contrariamente a quanto previsto. Suggerirei che il problema sia più legato agli errori di registrazione nella stampa.

— Pekka,

2

@pekka sì, ma la maggior parte del rendering oggi fa l'antialiasing.

— Yakk,

Se il livello superiore presenta trasparenza, la tacca comporterà un graduale arretramento del livello inferiore dal bordo che influisce sia sull'antialiasing sia sul colore di livello superiore. Una risposta più appropriata sarebbe quella di avere uno sconto rettangolare (di dimensioni difficili da stimare) nell'area in cui la miscelazione non è desiderata. Come lo quantificate?

— Pekka,

@pekka Se il livello superiore ha una quantità media di trasparenza, questo problema è molto meno problematico (come puoi vedere comunque il rosso sotto il blu). Poiché la trasparenza della parte superiore si avvicina all'opacità, avvicinati alla soluzione di cui sopra. Mentre si allontana dall'opacità, avvicinati alla pre-composizione. Il problema generale è difficile dato gli errori di registrazione, i problemi di accumulo (troppi livelli!), L'antialiasing e tutto il resto: ad un certo punto, si desidera scrivere vettori personalizzati per ciascun formato di output o in qualche modo diffondere i vettori. Ho semplicemente cercato di rispondere all'esatta causa tecnica del problema risolto dalla tacca.

— Yakk,

1

@Pekka è più difficile disegnare un rettangolo e poi si termina con il problema opposto dello stesso problema in quanto lo sfondo mostra una depressione. La tacca è una specie di compromesso tra un bug e un numero di altri (la tacca è per il rendering su schermo mentre il non avere una cavità quadrata è in modo che le lastre di sovrastampa possano essere fatte se necessario con errori minimi). Ma non c'è davvero alcun motivo per cui ci sia la necessità di farlo, è solo che i nostri renderer funzionano male, tutto qui. Potremmo risolvere facilmente tutti e 3 i problemi cambiando il modo in cui rasterizziamo.

— joojaa,

48

Cai ha ragione. Ho pensato di aggiungere anche una risposta visiva.

Il motivo per cui ciò accade è che si tratta di un SVG. A differenza di un'immagine raster in cui controlli ogni pixel renderizzato, la rasterizzazione dell'SVG avviene nel browser ... quindi il browser prende queste decisioni.

Una delle decisioni che il browser deve prendere è quando fare l'antialiasing. In genere lo farà quando un punto lungo una linea cade su un pixel. Quindi anti-alias quel pixel. Dal momento che renderizzerà tutti i livelli dell'SVG, lo farà su ogni livello ed è qui che puoi iniziare a ottenere l'artefatto sul bordo. Ciò è particolarmente vero quando si gioca con lo zoom di SVG in quanto ciò causerà la sovrapposizione di diversi pixel dello schermo.

Ecco una schermata di una scatola verde sovrapposta a una scatola rossa in Chrome. La parte superiore ha lo zoom della pagina al 100%, la parte inferiore è ingrandita. Nota la differenza nel rendering di quel bordo:

Se lo screenshot e lo ingrandisco per mostrare la rasterizzazione, puoi avere un'immagine più chiara di ciò che sta succedendo:

La soluzione ideale qui sarebbe che il rasterizzatore SVG nel browser fosse "più intelligente" e non rendesse le cose che sono impilate, ma dato che gli elementi SVG possono essere manipolati esternamente e vivere (dato che è solo un file XML) non è una soluzione pratica per il browser.

Quindi, invece, il designer prende quella decisione usando le tacche che vedi.

A proposito, questo è simile nel concetto a come gestire la registrazione nella stampa usando il trapping .

— DA01
fonte

16

La stampa in più colori richiede una registrazione accurata per evitare vuoti sgradevoli ed è una preoccupazione quando i manufatti sono composti da più fonti. Preoccupazioni simili possono verificarsi anche nei prodotti digitali in cui l'aritmetica di precisione limitata introduce necessariamente errori.

Il problema da evitare è quello del trapping inverso - in cui la deviazione dalla grafica desiderata può comportare una linea sottile del colore di sfondo mostrata a sinistra dei bordi coincidenti verticali. Poiché i colori sono molto contrastanti, l'impatto sarà evidente (prova a spostare la linea spezzata anche di 1 pixel a sinistra della verticale.

L'approccio non intende influire sulla miscelazione degli inchiostri. Le coordinate coerenti sullo schermo evitano il problema, mentre la mezza tonalità viene utilizzata per gestire il colore.

— Pekka
fonte