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

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

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

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

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

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

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

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

Один из способов рендеринга векторной графики (графика, определяемая полигонами, а не пикселями) в пиксели состоит в растеризации полигонов во время выполнения алгоритма рисовальщика.

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

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

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

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

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

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

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

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

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

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

Пока есть 100% покрытие одного полигона, это не проблема.

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

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

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

Кай прав. Я подумал, что добавлю и визуальный ответ.

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

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

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

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

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

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

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

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

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

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