¿Hay alguna razón por la cual el logotipo de Hillary Clinton tiene muescas ocultas?

226

¡Esta pregunta no es política en lo más mínimo!

Mientras miraba la versión SVG del logotipo de Hillary que se encuentra aquí , noté que había muescas en las dos barras verticales de la H. La barra transversal de la flecha cubre las muescas para que no se vean al ver el logotipo. Pero tengo mucha curiosidad por qué el diseñador podría haber puesto estas muescas. ¿Alguien sabe?

logo svg best-practice

— IJ Kennedy
fuente

53

Técnicamente, este es un esquema de elusión de errores. Es un poco sorprendente e inquietante pensar que todas las universidades y los principales proveedores de motores de renderizado en 2D cometen el mismo error una y otra vez, a pesar de que sabemos la causa, sabemos cómo solucionarlo y no es un éxito tan grande. en una computadora moderna. Y ninguna persona de gráficos en 3D rara vez comete este error y lo ha sabido por más de 30 años.

— joojaa

66

@NickT No es un problema de lucha es un problema de mezclar opacidad y cobertura, pero 3D es mucho más que juegos. En 3D hemos utilizado durante mucho tiempo el muestreo múltiple para resolver el problema de AA. El muestreo múltiple (generalmente, incluso si fuera así, los resultados no serían tan pronunciados) no calcula la cobertura y, por lo tanto, no comete el error de pensar que una cobertura del 50% es visible en un 25% a través de otra cobertura del 50%. Si bien esto puede ser cierto, la respuesta también puede ser 50% visible o ninguno visible. En este caso para evitar confusiones, el otro 50% se elimina manualmente, podemos arreglar 3 casos pero no todos. No debería ser necesario.

— joojaa

55

Es triste que lo haya reconocido claramente para evitar un error de representación de bordes superpuestos. Pero SVG todavía tiene 14 años, así que espero que esto se solucione algún día.

— Francisco Presencia

55

@FranciscoPresencia no es un problema con SVG, es solo un problema con la forma en que elegimos implementar erróneamente los renders. Los diferentes renderizadores SVG tienen una gravedad diferente de este problema

— joojaa

12

@ DA01 no, la solución ingenua es increíblemente simple, tiene menos código que el algoritmo actual. En lugar de hacer un cálculo basado en la cobertura, simplemente renderice como si no tuviera antialias en una resolución más alta y luego filtre la imagen a una resolución real. Esto nunca se derramará de abajo hacia arriba, ya que no puede cometer un error, el elemento más frontal lo oculta por completo. Las tarjetas gráficas hacen esto todo el tiempo de lo que se trata la configuración x4 x8 x16 aa en la configuración de la tarjeta gfx.

— joojaa

233

Para evitar posibles artefactos de renderizado.

Sin las muescas, es probable que vea los bordes de las formas inferiores donde se encuentran con los bordes de las formas superpuestas (de todos modos, en la pantalla, no es realmente un problema al imprimir).

Puede ver ejemplos y explicaciones de los posibles artefactos aquí:

Rara vez hay alguna razón para tener bordes perfectamente alineados que causen artefactos como ese, por lo que usar "muescas" como en el logotipo de Hillary es un buen hábito.

— Cai
fuente

66

En realidad, esto puede ser un gran problema con la impresión. En la impresión digital, al menos, el svg se rasterizará antes de enviarse a la impresora, y pueden aparecer los mismos tipos de artefactos. (último proyecto en mi último empleador (gran impresor comercial) que participan de software para ayudar a identificar este tipo de cosas antes de la costosa obra de tinta para el papel fue hecho por escrito.)

— Mr.Mindor

1

Ya que estamos hablando de política estadounidense, ¿te refieres a "artefactos"?

— Andrew Rasmussen

55

Según english.se quiero decir artefactos, no artefactos. (Pero como soy británico, quiero decir artefactos independientemente)

— Cai

Rara vez hay alguna razón ... solo curiosidad: ¿hay alguna razón?

— Alois Mahdal

@AloisMahdal Lo dudo mucho.

— Cai

61

Puede ser útil comprender la rasterización y el algoritmo del pintor.

Una forma de representar gráficos vectoriales (gráficos definidos por polígonos, en lugar de píxeles) en píxeles es rasterizar los polígonos mientras se ejecuta el algoritmo del pintor.

El algoritmo del pintor es un proceso de abajo hacia arriba donde primero coloca el fondo, luego dibuja sobre ese fondo con cada capa de color hasta llegar a la capa superior.

Cuando deposita una capa, presta atención a su cobertura (generalmente almacenada en un canal adicional, el canal alfa), y la usa para mezclar el color agregado con lo que ya está allí.

Si su nueva capa cubre un píxel en un 50%, y es azul, promedia el color actual de ese píxel con azul y dibuja eso allí.

Las cosas se vuelven un poco más complejas si está creando una imagen con transparencia, pero no fundamentalmente.

La rasterización es el proceso de convertir un polígono en píxeles. Aquí, calculamos cuánto cubre el polígono un píxel dado usando algo de álgebra, luego calculamos una cantidad de cobertura.

Si tiene dos bordes de un polígono que coinciden, exactamente uno encima del otro, pero ambos cubren a medias un píxel dado, lo que sucede es un problema.

Suponga que el polígono inferior es rojo y el azul superior y el fondo blanco.

Primero pintamos el rojo. Esto se mezcla con el blanco, lo que lleva a 50% de blanco 50% de rojo.

Luego pintamos el azul. Esto se mezcla con el 50% de blanco, 50% de rojo y obtenemos 25% de blanco, 25% de rojo, 50% de azul. Lo mismo sucede si el rojo y el azul se encuentran en el medio, o si el azul cubre completamente al rojo.

Pero "en realidad" el polígono azul cubrió completamente el rojo, entonces, ¿por qué lo estamos viendo? Porque el algoritmo olvida los detalles de posicionamiento de subpíxeles.

Mientras haya una cobertura del 100% de un polígono, esto no es un problema.

Ahora, este problema no es fundamental. Puede hacer la representación de polígonos con un enfoque similar al trazado de rayos (donde se renderiza en exceso por un factor de N ^ 2 en los puntos), o incluso un enfoque similar a un vector puro (donde resta formas de bloqueo de la geometría de las formas debajo ellos, cortándolos). En ninguno de los casos, los colores "ocultos" se filtran a la imagen de salida.

El algoritmo del pintor no es el único caso donde la geometría "oculta" puede filtrarse. Si está imprimiendo con medios opacos, a veces las capas de color no están perfectamente alineadas. Por lo tanto, las capas inferiores se filtran cuando la capa superior debe cubrirla por completo.

Como no sabe cómo se generará su imagen vectorial, muescas como esa le permiten crear imágenes más robustas frente a las técnicas de impresión / visualización imperfectas.

— Yakk
fuente

1

Su descripción se aplica en el caso de gráficos que contienen canales alfa, o en el caso de un dibujo de subpíxeles cuando se usa suavizado. El ejemplo de OP mostrará los artefactos de muesca para capas combinadas contrarias a lo que se pretende. Sugeriría que el problema está más relacionado con los errores de registro en la impresión.

— Pekka

2

@pekka sí, pero la mayoría de los renderizados son anti-aliasing hoy.

— Yakk

Si la capa superior tiene alguna transparencia, entonces la muesca dará como resultado un retroceso gradual de la capa inferior desde el borde, impactando tanto en el suavizado como en el color del nivel superior. Una respuesta más apropiada sería tener un descuento rectangular (de un tamaño difícil de estimar) en el área donde no se desea la mezcla. ¿Cómo cuantificas esto?

— Pekka

@pekka Si la capa superior tiene cantidades medias de transparencia, este problema es mucho menos problemático (de todos modos, puede ver el rojo debajo del azul). A medida que la transparencia de la parte superior se aproxima a la opacidad, aborde la solución anterior. A medida que se aleja de la opacidad, acérquese a la composición previa. El problema general es complicado dado los errores de registro, los problemas de acumulación (¡demasiadas capas!), El suavizado y todo lo demás: en algún momento, desea escribir vectores personalizados para cada formato de salida, o de alguna manera eliminar los vectores. Simplemente intenté responder a la causa técnica exacta del problema que resuelve la muesca.

— Yakk

1

@Pekka un rectangular es más difícil de dibujar y luego terminas con el problema opuesto del mismo problema en que el fondo muestra el canal. La muesca es una especie de compromiso entre un error sobre varios otros (la muesca es para renderizar en pantalla mientras que no tiene una cavidad cuadrada, de modo que se pueden hacer placas de sobreimpresión si es necesario con un mínimo de errores). Pero realmente no hay razón para que haya necesidad de hacer esto, es solo que nuestros procesadores funcionan mal, eso es todo. Podríamos resolver los 3 problemas fácilmente cambiando la forma en que rasterizamos.

— joojaa

48

Cai está en lo correcto. Pensé que también agregaría una respuesta visual.

La razón por la que esto sucede es que es un SVG. A diferencia de una imagen ráster donde controlas cada píxel renderizado, la rasterización del SVG ocurre en el navegador ... por lo que el navegador toma estas decisiones.

Una de las decisiones que debe tomar el navegador es cuándo hacer un suavizado. Normalmente hará esto cuando un punto a lo largo de una línea cae sobre un píxel. Entonces será anti alias ese píxel. Dado que renderizará todas las capas del SVG, lo hará en cada capa y ahí es donde puede comenzar a obtener el artefacto de borde. Esto es especialmente cierto cuando juegas con el zoom del SVG, ya que hará que se superponga con diferentes píxeles de la pantalla.

Aquí hay una captura de pantalla de un cuadro verde que se superpone a un cuadro rojo en Chrome. La parte superior está al 100% de zoom de página, la parte inferior está ampliada. Observe la diferencia al representar ese borde:

Si hago una captura de pantalla y hago zoom para mostrar la rasterización, puede tener una imagen más clara de lo que está sucediendo:

La solución ideal aquí sería que el rasterizador SVG en el navegador sea 'más inteligente' y no renderice cosas que están apiladas, pero dado que los elementos SVG pueden manipularse externamente y en vivo (ya que es solo un archivo XML) no es una solución práctica para el navegador

Entonces, en cambio, el diseñador toma esa decisión usando las muescas que ve.

Por cierto, esto es similar en concepto a cómo lidiar con el registro en la impresión mediante la captura .

— DA01
fuente

16

La impresión en múltiples colores requiere un registro preciso para evitar huecos antiestéticos y es una preocupación cuando los artefactos se componen de múltiples fuentes. Pueden surgir preocupaciones similares incluso en productos digitales donde la aritmética de precisión limitada necesariamente introduce errores.

El problema que se debe evitar es el atrapado inverso , donde la desviación del gráfico deseado puede dar como resultado una línea delgada del color de fondo que se muestra a la izquierda de los bordes coincidentes verticales. Como los colores son muy contrastantes, el impacto será notable (intente mover la línea discontinua incluso 1 píxel a la izquierda de la vertical).

El enfoque no pretende impactar en la mezcla de tintas. Las coordenadas consistentes en pantalla evitan el problema, mientras que el medio tono se usa para administrar el color.

— Pekka
fuente