SVG-шрифты и COLR-шрифты: сравнение и совместимость

SVG-шрифты и COLR-шрифты решают одну задачу — позволяют отображать цветные и сложные векторные глифы, — но делают это разными способами. SVG хранит графическое описание символа, а COLR/CPAL собирает его из слоёв и цветовых палитр. Для веба и интерфейсов обычно практичнее COLR, тогда как SVG может быть полезен там, где важны сложные векторные эффекты и совместимость с конкретным графическим ПО.

SVG-шрифт использует векторное описание символов на основе формата Scalable Vector Graphics. В отличие от обычного шрифта с одним контуром глиф может содержать несколько цветных областей, сложные формы, прозрачность и другие графические свойства, которые характерны для SVG. Исторически встречались отдельные SVG-шрифты, встроенные в SVG-документ, а также SVG-in-OpenType — шрифты OpenType с данными SVG внутри специальной таблицы.

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

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

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

В COLRv0 цветной символ строится преимущественно из плоских слоёв. COLRv1 расширяет модель: она поддерживает более выразительные градиенты, преобразования, композицию и повторное использование компонентов. Это делает формат подходящим не только для простых двухцветных букв, но и для сложной брендовой графики, если используемый рендерер реализует нужную часть спецификации.

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

Для веба цветной шрифт нужно проверять в реальных браузерах, а не только в редакторе. Поддержка COLR/CPAL в современных браузерах и операционных системах в целом шире и предсказуемее, особенно для базовых цветных слоёв. Однако реализация COLRv1, палитр, градиентов и отдельных эффектов может отличаться.

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

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

Поддержка цветных шрифтов в настольных приложениях развивается неодинаково. Браузер может корректно показать COLR-глиф, а конкретная версия редактора, верстального приложения или офисной программы — импортировать только чёрно-белый контур. SVG-in-OpenType также может вести себя по-разному при экспорте в PDF, растеризации и конвертации в другой формат.

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

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

Если надпись используется как часть композиции, а не как обычный текст, формат шрифта может быть не лучшим инструментом. Сложный логотип часто надёжнее экспортировать как SVG-иллюстрацию или другой согласованный графический ресурс. Если нужен именно устанавливаемый шрифт с цветными символами, SVG-in-OpenType способен дать широкие графические возможности, но требует строгого контроля среды.

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

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

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

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

Для веба чаще выбирают COLR/CPAL, потому что формат встроен в OpenType и обычно имеет более предсказуемую поддержку в современных браузерах и системах. SVG-in-OpenType может подойти для конкретного проекта, но его обязательно нужно проверять в целевых окружениях и дополнять резервным вариантом.

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

COLRv0 описывает цветной глиф как набор слоёв с плоскими цветами. COLRv1 расширяет эту модель и добавляет более сложные варианты заливки, композиции, преобразований и повторного использования компонентов. Чем сложнее оформление, тем важнее проверить реальную поддержку версии формата в целевом ПО.

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

Если логотип должен оставаться редактируемым текстом в разных системах, можно рассмотреть COLR или SVG-in-OpenType после проверки совместимости. Для фиксированной брендовой композиции обычно надёжнее использовать отдельный векторный файл. Шрифт оправдан тогда, когда логотипных символов много или их нужно вводить с клавиатуры и масштабировать как текст.

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

Да, COLR/CPAL предусматривает работу с палитрами, поэтому один шрифт может иметь несколько цветовых наборов. Но возможность выбрать или изменить палитру зависит от приложения и способа подключения шрифта. В вебе разработчику нужно отдельно проверить, какие настройки доступны через используемый браузер и CSS-инструменты.

SVG-шрифты дают свободу векторной графики, а COLR-шрифты предлагают более типографичный способ собрать цветные глифы из слоёв и палитр. Для веб-интерфейсов и системного использования разумно начинать с COLR/CPAL, а SVG-in-OpenType выбирать после проверки конкретной среды. Создайте собственный шрифт и протестируйте его сценарии на fontgenerator.ru.