Всё о шрифтах в SVG: от основ до лайфхаков

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

Методы работы с SVG fonts

• Системные шрифты: надежность, но отсутствие гарантий единообразия.
• Веб-шрифты, подключенные через CSS: единый стиль, но сложности с встраиванием.
• Конвертация текста в кривые (path): абсолютная стабильность, но потеря возможности редактирования и семантики.

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

Основы работы с текстом в SVG закладываются двумя главными XML-элементами: <text> и <tspan>. Элемент <text> создает текстовый блок, а <tspan> позволяет форматировать его фрагменты внутри этого блока, аналогично тому, как тег <span> работает в HTML. С их помощью вы можете не только выводить строки, но и позиционировать их с точностью до пикселя, что является мощным преимуществом векторной графики.

Текст в SVG позиционируется с помощью атрибутов x и y, которые задают координаты базовой линии первой буквы. Это важное отличие от позиционирования блочных HTML-элементов, где координаты обычно относятся к верхнему левому углу. Для многострочного текста исторически использовался элемент <tspan> с атрибутом dy (сдвиг по вертикали), хотя в современном SVG также доступен более семантичный элемент <textArea> (но его поддержка пока менее стабильна).

1. font-family: определяет семейство шрифта (например, ‘Roboto’, sans-serif).
2. font-size: размер шрифта. Может задаваться в пикселях (px), относительных единицах (em) или пользовательских единицах SVG.
3. font-weight: насыщенность шрифта (normal, bold, 700).
4. fill: цвет заливки текста. Может быть цветовым словом, HEX, RGB или градиентом.
5. stroke: цвет обводки контуров букв.
6. text-anchor: выравнивание текста относительно заданной точки (start, middle, end).

<svg width="280" height="150">  
  <text x="20" y="40" font-family="Arial" font-size="24" fill="navy">
    Простой текст в SVG
  </text>  
  <text x="20" y="80" font-family="Georgia" font-size="20" fill="black">
    Это начало предложения, 
    <tspan dy="25" x="20" font-weight="bold" fill="red">а это — выделенный</tspan>
    <tspan dy="25" x="20" font-style="italic">фрагмент.</tspan>
  </text>
</svg>

Если SVG инлайново вставлен в HTML-документ (<svg> прямо в коде страницы), то он может использовать те же шрифты, что и весь сайт, подключенные через глобальный CSS. Однако, если SVG используется как отдельный файл (через <img>, <object> или как background-image в CSS), он становится автономным «островком», и ему необходимо иметь объявление шрифта внутри себя.

Самый надежный и рекомендуемый способ — встраивание правил @font-face непосредственно внутрь SVG-файла с помощью тега <style>, который обычно помещается в секцию <defs> (определения). Это гарантирует, что браузер загрузит указанный шрифт при отрисовке графики, независимо от её окружения.

Сравнение методов подключения шрифтов

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="200">
  <defs>
    <style>
      @font-face {
        font-family: 'MyWebFont';
        src: url('https://example.com/fonts/webfont.woff2') format('woff2');
      }
    </style>
  </defs>
  <text x="20" y="50" font-family="'MyWebFont', sans-serif" font-size="32">
    Текст с кастомным веб-шрифтом
  </text>
</svg>

Важный нюанс: при использовании SVG в качестве background-image в CSS, правила @font-face из внешнего CSS страницы не будут применены. В этом случае единственным рабочим решением является встраивание шрифта внутрь SVG или конвертация текста в кривые.

Браузер намеренно ограничивает их возможности, блокируя доступ к внешним ресурсам, включая шрифты, загружаемые по ссылке в правиле @font-face. Это означает, что если ваш SVG, используемый как <img src='logo.svg'>, ссылается на шрифт через url('https://...'), этот шрифт почти наверняка не загрузится, и браузер откатится к резервному семейству (часто serif), испортив дизайн.

Обходные пути и решения

1. Встраивание шрифта в Base64

Самый надежный способ. Шрифт конвертируется в строку в формате base64 и вставляется прямо в правило src внутри @font-face. Это делает SVG полностью автономным.

<style>
  @font-face {
    font-family: 'EmbeddedFont';
    src: url(data:application/font-woff2;charset=utf-8;base64,d09GRgABAAAAA...) format('woff2');
  }
</style>

• Плюсы: 100% работоспособность в <img>, <object>, CSS background-image.
• Минусы: значительное увеличение размера SVG-файла (примерно на 30-35%).

2. Использование <object> вместо <img>

<object data="logo.svg" type="image/svg+xml"></object> загружает SVG как отдельный документ, в котором внешние ресурсы (при соблюдении CORS) могут быть разрешены. Это позволяет использовать внешние ссылки на шрифты.

• Плюсы: чистота кода, разделение ресурсов.
• Минусы: более сложная логика взаимодействия (стилизация извне, скрипты), чуть менее привычная семантика.

3. Конвертация текста в кривые (paths)

Радикальное, но абсолютно надежное решение. Текст в графическом редакторе (Illustrator, Figma, Inkscape) преобразуется в векторные контуры (<path<). Шрифт больше не нужен.

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

1. Оптимизация SVG со встроенными шрифтами

Если вы пошли по пути встраивания Base64, файл может стать огромным. Используйте инструменты для оптимизации:

• Субсеттинг шрифта: включайте в файл только те символы (глифы), которые используются в конкретном SVG. Онлайн-сервисы (например, (откроется в новой вкладке)Font Subsetter) или локальные утилиты (pyftsubset из fonttools) позволяют это сделать.
• Оптимизация SVG: пропускайте итоговый файл через (откроется в новой вкладке)SVGO (SVG Optimizer). Он, среди прочего, может сжимать Base64-строки.

2. Доступность (a11y)

Текст в SVG должен оставаться доступным для скринридеров и поисковиков.

• Всегда используйте элемент <text>, а не конвертируйте всё в <path>, если это возможно.
• Добавляйте атрибут aria-label или <title> и <desc> для описания графики в целом.

<svg aria-labelledby="title1">
  <title id="title1">Логотип компании Веб-Студия</title>
  <text x="10" y="50">Веб-Студия</text>
</svg>

3. Текст с градиентом и обводкой

<defs>
  <linearGradient id="textGradient" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" stop-color="#ff0000" />
    <stop offset="100%" stop-color="#0000ff" />
  </linearGradient>
</defs>
<text x="20" y="70" font-size="40" font-weight="bold"
      fill="url(#textGradient)"
      stroke="#333" stroke-width="1">
  Радужный текст
</text>

4. Эмуляция text-overflow: ellipsis

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

Конвертация текста в кривые — это крайняя, но часто необходимая мера, которая превращает каждый символ в набор векторных контуров (<path>). Этот процесс лишает текст его «текстовой» природы: его нельзя выделить курсором, скопировать как текст, изменить шрифт или размер через CSS, а также проиндексировать поисковыми системами. Однако именно это делает отображение абсолютно независимым от наличия шрифтов у конечного пользователя.

Когда это необходимо

1. Логотипы и статичные элементы брендинга, где пиксель-перфект точность критична.
2. Сложные декоративные шрифты, которые маловероятно есть на большинстве устройств и которые слишком «тяжелы» для веб-встраивания.
3. Графика, предназначенная для печати в высоком разрешении, где недопустима подмена шрифта.
4. Иконки с текстовыми элементами, которые используются в виде спрайтов или фоновых изображений.

Как правильно конвертировать

1. В графическом редакторе (Adobe Illustrator, Figma, Inkscape) выделите текстовый объект.
2. Выполните команду Convert to Outlines (или Create Outlines).
3. ВАЖНЫЙ ЛАЙФХАК: перед конвертацией обязательно создайте копию исходного текстового слоя и скройте его. Это позволит вам в будущем внести правки, не набирая текст заново и не подбирая шрифт.
4. Экспортируйте SVG. Вы увидите, что вместо тегов <text> файл содержит сложные пути <path d="M100 200 L150 250...">.

<!-- До конвертации -->
<text x="20" y="40" font-family="MyLogoFont">Лого</text>

<!-- После конвертации в пути -->
<path d="M20,40 l10,5 c5,5 10,0 15,-5 ..." fill="black"/>
<path d="M50,40 l5,10 ..." fill="black"/>

Помните: после этой операции файл редактируется только как векторная форма. Для внесения текстовых правок нужно возвращаться к сохраненной копии в редакторе.

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

Задача

Создать SVG-бейдж «Новинка» с использованием кастомного шрифта.

1. Дизайн в редакторе

Создаем композицию в Figma/Illustrator: закругленный прямоугольник и надпись NEW внутри него.

2. Выбор стратегии

Так как это маленькая статичная иконка, которую будут использовать как <img> и возможно как background-image, оптимальный путь — встраивание субсеттинга шрифта в Base64 или конвертация в кривые. Для примера выберем встраивание.

3. Подготовка шрифта

• Берем файл шрифта .woff2.
• Генерируем субсетт, оставив только символы: N, E, W. Это сократит размер в разы.
• Конвертируем полученный мини-файл в Base64 (используем онлайн-конвертер или скрипт).

4. Сборка SVG

<svg xmlns="http://www.w3.org/2000/svg" width="80" height="30" viewBox="0 0 80 30">
  <defs>
    <style>
      /* Встраиваем только нужные глифы шрифта */
      @font-face {
        font-family: 'BadgeFont';
        src: url(data:font/woff2;base64,d09GMgABAAAAAADwAA8AAAAAAbwAAJ...) format('woff2');
        font-weight: bold;
      }
      .badge-bg { fill: #ff4757; rx: 5px; }
      .badge-text {
        font-family: 'BadgeFont', sans-serif;
        font-size: 14px;
        font-weight: bold;
        fill: white;
        text-anchor: middle;
      }
    </style>
  </defs>
  <!-- Фон бейджа -->
  <rect class="badge-bg" width="80" height="30"/>
  <!-- Текст, идеально выровненный по центру -->
  <text class="badge-text" x="40" y="20">NEW</text>
</svg>

5. Финишная оптимизация

Прогоняем финальный код через SVGO, чтобы удалить лишние пробелы и комментарии.

6. Использование

Теперь этот SVG можно безопасно вставлять через <img src="badge.svg">, использовать в CSS как background: url(badge.svg) или инлайново в HTML. Шрифт гарантированно «уедет» вместе с файлом.

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

Подведем итоги

• Для интерактивных SVG, встроенных прямо в HTML, смело используйте веб-шрифты, подключенные через общий CSS сайта.
• Для отдельных файлов SVG (иконки, бейджи, статичные иллюстрации), которые будут вставляться через <img>, единственные надежные варианты — это встраивание шрифта в Base64 или конвертация текста в кривые.
• Конвертация в <path> — это «атомная бомба», которая решает все проблемы с отображением, но убивает семантику и доступность. Используйте её осознанно.
• Не забывайте про оптимизацию (субсеттинг шрифтов, SVGO) и доступность (<title>, <desc>).

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