¡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
fuente
Respuestas:
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í:
La imagen se ve en relieve cuando se convierte a SVG
¿Cómo poner un objeto delante y detrás de otro al mismo tiempo?
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.
fuente
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.
fuente
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 .
fuente
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.
fuente