SVG и COLR: чем отличаются цветные форматы шрифтов

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

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

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

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

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

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

COLR расшифровывается как Color, а CPAL — как Color Palette. Таблица COLR описывает, из каких слоёв состоит цветной глиф и в каком порядке они отображаются. Таблица CPAL хранит палитры, то есть наборы цветов, которые используются этими слоями. В результате одна буква может быть собрана из нескольких обычных векторных контуров.

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

Важно не путать название технологии с расширением файла. Цветной шрифт SVG или COLR чаще поставляется как OpenType-файл с расширением OTF или TTF. Само расширение не показывает, какие таблицы находятся внутри. Чтобы определить реальную структуру, используют редактор шрифтов или анализатор OpenType-таблиц.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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