이 질문은 최소한 정치적이 아닙니다!
여기 에있는 Hillary 로고의 SVG 버전을 보면서 H의 두 세로 막대에 노치가있는 것을 발견했습니다. 화살표 크로스바는 노치를 가리므로 로고를 볼 때 보이지 않습니다. 그러나 나는 왜 디자이너가 이러한 노치를 넣었을 지 궁금하다. 아무도 아는가?
이 질문은 최소한 정치적이 아닙니다!
여기 에있는 Hillary 로고의 SVG 버전을 보면서 H의 두 세로 막대에 노치가있는 것을 발견했습니다. 화살표 크로스바는 노치를 가리므로 로고를 볼 때 보이지 않습니다. 그러나 나는 왜 디자이너가 이러한 노치를 넣었을 지 궁금하다. 아무도 아는가?
답변:
노치가 없으면 아래쪽 셰이프의 가장자리가 오버레이 셰이프의 가장자리와 만나는 위치를 볼 수 있습니다 (어쨌든 화면에서는 인쇄시 실제로 문제가되지 않습니다).
가능한 인공물에 대한 예와 설명은 여기에서 볼 수 있습니다.
힐러리의 로고처럼 "노치"를 사용하는 것이 좋은 습관이 될 정도로 가장자리를 완벽하게 정렬해야 할 이유가 거의 없습니다.
래스터 화와 화가 알고리즘을 이해하면 도움이 될 수 있습니다.
벡터 그래픽 (픽셀 대신 다각형으로 정의 된 그래픽)을 픽셀로 렌더링하는 한 가지 방법은 화가 알고리즘을 실행하는 동안 다각형을 래스터 화하는 것입니다.
페인터의 알고리즘은 상향식 프로세스로, 먼저 배경을 내려 놓은 다음 상단 레이어에 도달 할 때까지 각 색상 레이어로 해당 배경 위에 그립니다.
레이어를 증착 할 때 커버리지 (보통 추가 채널 인 알파 채널에 저장 됨)에주의를 기울이고 추가 된 색상을 기존 색상과 혼합하는 데 사용합니다.
새 레이어가 픽셀을 50 % 덮고 파란색 인 경우 해당 픽셀의 현재 색상을 파란색으로 평균화하고 대신 그 색상을 그립니다.
기본적으로는 아니지만 투명도로 이미지를 만드는 경우 상황이 조금 더 복잡해집니다.
래스터 화는 다각형을 픽셀로 변환하는 프로세스입니다. 여기서는 대수를 사용하여 다각형이 주어진 픽셀을 얼마나 덮고 있는지 알아 낸 다음 적용 범위를 계산합니다.
정확히 일치하는 다각형의 두 가장자리가 있지만 주어진 픽셀의 절반을 덮으면 문제가 발생합니다.
아래쪽 다각형이 빨간색이고 위쪽 파란색과 배경이 흰색이라고 가정합니다.
먼저 빨간색을 칠합니다. 이것은 흰색과 혼합되어 50 % 흰색 50 % 빨간색으로 이어집니다.
그런 다음 파란색을 칠합니다. 이것은 50 % 흰색 50 % 빨간색과 혼합되며 25 % 흰색 25 % 빨간색 50 % 파란색이됩니다. 빨간색과 파란색이 중간에 만나거나 파란색이 빨간색을 완전히 덮는 경우에도 마찬가지입니다.
그러나 "실제로"파란색 다각형이 빨간색을 완전히 덮었으므로 왜 볼 수 있습니까? 알고리즘 은 서브 픽셀 위치 세부 사항을 잊어 버리기 때문 입니다.
하나의 폴리곤이 100 % 적용되는 한, 이것은 문제가되지 않습니다.
이제이 문제는 근본적인 것이 아닙니다. 광선 추적과 같은 접근 방식 (점에서 N ^ 2 인수로 오버 렌더링) 또는 순수한 벡터와 같은 접근 방식 (아래에서 도형의 형상에서 차단 모양을 뺀 위치)을 사용하여 다각형 렌더링을 수행 할 수 있습니다. 그들을 잘라). 두 경우 모두 "숨겨진"색상이 출력 이미지로 누출되지 않습니다.
"숨겨진"지오메트리가 누출 될 수있는 유일한 경우는 화가의 알고리즘이 아닙니다. 불투명 용지로 인쇄하는 경우 색상 레이어가 완벽하게 정렬되지 않는 경우가 있습니다. 따라서 상층이 완전히 덮을 때 하층이 누출됩니다.
벡터 이미지가 어떻게 출력되는지 알지 못하므로, 불완전한 인쇄 / 디스플레이 기술에 비해 더 강력한 이미지를 만들 수 있습니다.
Cai가 맞습니다. 시각적 인 답변도 추가 할 것이라고 생각했습니다.
이것이 발생하는 이유는 SVG이기 때문입니다. 렌더링 된 각 픽셀을 제어하는 래스터 이미지와 달리 SVG의 래스터 화는 브라우저에서 발생하므로 브라우저가 이러한 결정을 내립니다.
브라우저가 내려야 할 결정 중 하나는 앤티 앨리어싱을 수행하는 시점입니다. 일반적으로 선을 따르는 점이 픽셀에 떨어질 때이 작업을 수행합니다. 그런 다음 해당 픽셀의 앨리어싱을 방지합니다. SVG의 모든 레이어를 렌더링하므로 각 레이어 마다이 작업을 수행하므로 가장자리 아티팩트를 시작할 수 있습니다. SVG의 확대 / 축소를 사용하여 재생하면 다른 화면 픽셀과 겹치게됩니다.
다음은 Chrome에서 빨간색 상자와 겹치는 녹색 상자의 스크린 샷입니다. 상단은 100 % 페이지 확대, 하단은 확대됩니다. 해당 가장자리 렌더링의 차이점을 확인하십시오.
스크린 샷을 찍고 확대하여 래스터 화를 표시하면 진행 상황을보다 명확하게 파악할 수 있습니다.
여기서 이상적인 수정은 브라우저의 SVG 래스터 라이저가 더 똑똑하고 쌓인 것을 렌더링하지 않는 것이지만 SVG 요소는 외부에서 조작하고 (XML 파일 일 뿐이므로) 실시간으로 처리 할 수 있다는 점에서 실용적인 해결책은 아닙니다. 브라우저를 위해.
대신, 디자이너는 보이는 노치를 사용하여 결정을 내립니다.
그런데 이것은 개념적으로 트래핑을 사용하여 인쇄 등록 을 처리 하는 방법과 유사 합니다.
여러 색상으로 인쇄하려면보기 흉한 간격을 피하기 위해 정확한 등록이 필요하며 아티팩트가 여러 소스로 구성된 경우 문제가됩니다. 제한된 정밀 산술로 인해 반드시 오류가 발생하는 디지털 제품에서도 비슷한 문제가 발생할 수 있습니다.
피해야 할 문제는 역 트래핑 중 하나입니다 . 의도 된 그래픽과의 편차로 인해 수직 일치 모서리 왼쪽에 배경색이 얇게 나타날 수 있습니다. 색상의 대비가 높아짐에 따라 그 영향이 눈에 띄게됩니다 (파손 선을 세로 왼쪽으로 1 픽셀 더 이동해보십시오.
이 접근법은 잉크 혼합에 영향을 미치지 않습니다. 화면의 일관된 좌표는 문제를 방지하는 반면 하프 톤은 색상을 관리하는 데 사용됩니다.