Как работает подсказка пикселей?

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

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

Что касается того, как это работает в SVG, посмотрите на исходный код SVG-файла, и вы поймете, что происходит.

В открывающем SVGтеге много атрибутов, два определяют ширину и высоту. В SVG, который у меня есть на рабочем столе, они установлены как таковые:

<svg width="744.09448819" height="1052.3622047" ...

Как видите, мой конкретный SVG не имеет определенной ширины/высоты в пикселях. Я мог бы настроить свой SVG так, чтобы он был ТОЧНО столько-то пикселей на такое-то количество пикселей, а затем, исходя из этого, в моем редакторе SVG я мог бы включить пиксельную сетку, чтобы гарантировать, что все мои вертикальные и горизонтальные линии пересекаются точно между двумя пикселями. .

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

Таким образом, то, что автор этой статьи называет «подсказкой по пикселям», просто берет ваш файл SVG и гарантирует, что каждая строка «привязывается» к определенной единице пикселя. Это будет создано редактором SVG, который вы используете, и реализовано через браузер, отображающий изображение на основе атрибутов ширины/высоты.

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

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

Например, возможно, ваш SVG имеет размер 100 x 100 пикселей. Ваши линии могут гарантированно оставаться «четкими до пикселя», только если вы отображаете SVG точно в размере 100x100, 200x200, 300x200, 400x400 и т. д.

Я предполагаю, что "хинтинг пикселей" работает путем идеального выравнивания графических элементов по пикселям:

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

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

(это мое понимание пиксельного хинтинга, возможно, кто-то сможет объяснить его лучше или по-другому).