Есть ли причина, по которой логотип Хиллари Клинтон имеет скрытые выемки?

Этот вопрос ни в коем случае не политический!

Глядя на SVG-версию логотипа Хиллари, найденную здесь , я заметил, что на двух вертикальных полосах буквы H есть выемки. Перекладина со стрелкой закрывает выемки, поэтому они не видны при просмотре логотипа. Но мне очень любопытно, почему дизайнер вставил эти надрезы. Кто-нибудь знает?

Для предотвращения возможных артефактов рендеринга.

Без выемок вы, скорее всего, увидите края нижних фигур там, где они встречаются с краями наложенных фигур (в любом случае на экране это не проблема при печати).

Вы можете увидеть примеры и объяснение возможных артефактов здесь:

• Изображение выглядит с тиснением при конвертации в SVG

• Как разместить один объект одновременно и перед, и позади другого?

Редко есть какая-либо причина иметь идеально выровненные края, которые могут привести к таким артефактам, поэтому использование «надрезов», таких как логотип Хиллари, является хорошей привычкой.

Понимание растеризации и алгоритма художника может помочь.

Один из способов рендеринга векторной графики (графики, определяемой полигонами, а не пикселями) в пикселях - это растеризация полигонов при запуске алгоритма рисования.

Алгоритм рисования представляет собой процесс «снизу вверх», в котором вы сначала откладываете фон, а затем рисуете поверх этого фона каждым слоем цвета, пока не достигнете верхнего слоя.

Когда вы размещаете слой, вы обращаете внимание на его покрытие (обычно хранящееся на дополнительном канале, альфа-канале) и используете его для смешивания добавленного цвета с тем, что уже есть.

Если ваш новый слой покрывает пиксель на 50%, и он синий, вы усредняете текущий цвет этого пикселя синим цветом и рисуете его там.

Все становится немного сложнее, если вы создаете изображение с прозрачностью, но не принципиально.

Растеризация - это процесс превращения многоугольника в пиксели. Здесь мы определяем, насколько многоугольник покрывает данный пиксель, используя некоторую алгебру, а затем вычисляем величину покрытия.

Если у вас есть два ребра многоугольника, которые совпадают - точно друг над другом - но оба наполовину покрывают данный пиксель, то случается проблема.

Предположим, что нижний многоугольник красный, а верхний синий и фон белый.

Сначала мы красим красным. Это смешивается с белым, что приводит к 50% белого и 50% красного.

Затем мы рисуем синий. Это смешивается с 50% белого 50% красного, и мы получаем 25% белого 25% красного 50% синего. То же самое происходит, если красный и синий встречаются посередине, или если синий полностью закрывает красный.

Но «на самом деле» синий многоугольник полностью покрыл красный, так почему мы видим это? Потому что алгоритм забывает детали позиционирования субпикселя.

До тех пор, пока охват одного полигона составляет 100%, это не проблема.

Теперь эта проблема не принципиальна. Вы можете сделать рендеринг полигонов с помощью метода трассировки лучей (где вы делаете избыточный рендеринг с коэффициентом N ^ 2 в точках), или даже чисто векторного подхода (где вычитаете блокирующие фигуры из геометрии фигур под их, вырезая их). Ни в том, ни в другом случае «скрытые» цвета не просачиваются в выходное изображение.

Алгоритм художника - не единственный случай, когда «скрытая» геометрия может просочиться. Если вы печатаете на непрозрачных носителях, иногда цветовые слои не идеально выровнены. Таким образом, нижние слои просачиваются, когда верхний слой должен полностью покрывать его.

Поскольку вы не знаете, как будет выводиться ваше векторное изображение, такие отметки позволяют создавать изображения, более устойчивые к несовершенным методам печати / отображения.

Цай это правильно. Я решил добавить визуальный ответ.

Причина в том, что это SVG. В отличие от растрового изображения, где вы управляете каждым визуализированным пикселем, растеризация SVG происходит в браузере ... поэтому браузер принимает эти решения.

Одно из решений, которое должен принять браузер, - когда делать сглаживание. Обычно это происходит, когда точка вдоль линии падает на пиксель. Затем будет сглаживать этот пиксель. Так как он будет рендерить все слои SVG, он будет делать это с каждым слоем, и именно здесь вы можете начать получать краевые артефакты. Это особенно верно, когда вы играете с масштабированием SVG, так как это приведет к тому, что он будет перекрывать разные пиксели экрана.

Вот снимок экрана с зеленой рамкой, перекрывающей красную рамку в Chrome. Верхняя часть страницы имеет 100% масштабирование страницы, нижняя часть увеличена. Обратите внимание на разницу в рендеринге этого края:

Если я сделаю снимок экрана и увеличу масштаб, чтобы показать растеризацию, вы сможете получить более четкое представление о том, что происходит:

В этом случае идеальным решением было бы растеризировать SVG-браузер в браузере, чтобы он был «умнее» и не отображал вещи в стеке, но, учитывая, что элементами SVG можно манипулировать извне и жить (так как это всего лишь файл XML), это не практичное решение. для браузера.

Так что вместо этого дизайнер принимает это решение, используя вырезы, которые вы видите.

Кстати, в принципе это похоже на то, как бороться с регистрацией в печати с помощью треппинга .

Печать в нескольких цветах требует точной регистрации, чтобы избежать неприглядных промежутков, и является проблемой, когда артефакты составлены из нескольких источников. Подобные проблемы могут возникать даже в цифровых продуктах, где арифметика с ограниченной точностью обязательно приводит к ошибке.

Проблема, которую следует избегать, заключается в обратном захвате - когда отклонение от намеченного изображения может привести к появлению тонкой линии цвета фона, отображаемой слева от совпадающих вертикальных краев. Поскольку цвета очень контрастные, влияние будет заметным (попробуйте переместить пунктирную линию даже на 1 пиксель влево от вертикали.

Подход не предназначен для воздействия на смешивание чернил. Непротиворечивые координаты на экране позволяют избежать этой проблемы, а полутонирование используется для управления цветом.