SVG Font

Оригинальный векторный формат шрифта — человекочитаемый XML, сопоставляющий SVG-контуры с глифами шрифта.

.svg Формат SVG Font

ТипВекторный на основе XML

СжатиеОтсутствует (обычный текст)

Размер файлаНаибольший среди всех форматов

ПоддержкаТолько Safari (устарел в других браузерах)

Лучше всего дляОтладка, исходный формат

BobcornИсточник конвейера

Что такое SVG Font?

SVG-шрифты были определены в составе спецификации SVG 1.1, опубликованной W3C. В отличие от традиционных двоичных форматов шрифтов, SVG-шрифты встраивают контуры глифов в виде SVG-данных пути внутри элемента <font>. Каждый глиф представлен элементом <glyph>, атрибут d которого содержит векторный путь, описывающий форму.

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

Как это работает

Файл SVG-шрифта оборачивает контуры глифов в стандартную XML-структуру. Вот упрощённый пример:

Структура SVG Font

<font id="MyIcons">
  <font-face font-family="MyIcons" units-per-em="1024"/>
  <glyph glyph-name="home" unicode="&#xE001;"
         d="M512 0L0 448h128v576h256V640h256v384h256V448h128z"/>
  <glyph glyph-name="search" unicode="&#xE002;"
         d="M..."/>
</font>

Элемент <font-face> объявляет имя семейства шрифтов и систему координат (units-per-em). Каждый <glyph> сопоставляет кодовую точку Unicode с векторным путём. Атрибут d использует точно такой же синтаксис путей, что и обычный элемент SVG <path>.

Это промежуточный формат в конвейере Bobcorn. Отдельные SVG-иконки сначала собираются в эту структуру SVG-шрифта, которая затем преобразуется в двоичные форматы: SVG Font → TTF → WOFF / WOFF2 / EOT.

Плюсы и минусы

Плюсы

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

Минусы

Наибольший размер файла среди всех форматов шрифтов
Устарел в Chrome, Firefox и Edge
Полное отсутствие сжатия
Нет поддержки хинтинга
Плохое качество рендеринга в Windows

Поддержка браузеров

Поддержка SVG-шрифтов была удалена из большинства основных браузеров. Chrome отказался от поддержки SVG-шрифтов в версии 38 (2014). Firefox никогда её не реализовывал. Edge на базе Chromium тоже не поддерживает её. Единственным исключением остаётся Safari и iOS Safari, которые по-прежнему отображают SVG-шрифты.

Для практического использования в вебе SVG Font — это фактически устаревший формат. Никогда не следует полагаться на него как на формат доставки для конечных пользователей. Вместо него используйте WOFF2.

Когда использовать SVG Font

Отладка проблем при генерации шрифтов — поскольку это обычный XML, вы можете напрямую прочитать данные пути и сравнить их с исходными SVG-иконками для диагностики проблем.
В качестве исходного формата в конвейерах сборки — многие инструменты генерации шрифтов (включая Bobcorn) используют SVG Font как промежуточное представление перед преобразованием в двоичные форматы.
Поддержка устаревших iOS < 5 — крайне редкий случай сегодня, но старые устройства iOS, появившиеся до поддержки WOFF, могли использовать только SVG-шрифты для веб-шрифтов.

Bobcorn

В Bobcorn SVG Font является первым шагом конвейера генерации. Ваши SVG-иконки собираются в структуру SVG-шрифта, которая затем преобразуется в TTF, а оттуда — в WOFF, WOFF2 и EOT. Вы можете экспортировать файл SVG Font для отладки — это особенно полезно, когда глиф выглядит неправильно и нужно изучить необработанные данные пути.