SVG textLength: вписать подпись без искажения букв

Используйте textLength с lengthAdjust="spacing", если подписи SVG нужна определённая длина и небольшая коррекция интервалов допустима. Форма глифов останется неизменной. Если выбрать spacingAndGlyphs, рендерер может растянуть или сжать сами буквы вдоль строки текста. Эти два режима определены в спецификации текста SVG.

Особенность заключается в цели: textLength задаёт требуемую длину, а не максимальную ширину. Он может так же легко растянуть короткую подпись, как сжать длинную. Переносы строк он также не создаёт.

Что меняет каждая настройка

spacing — режим по умолчанию, когда вы задаёте textLength без значения lengthAdjust. Справочник MDN по textLength объясняет взаимодействие требуемой длины и режима коррекции.

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

Короткая и длинная подписи с одинаковой целевой длиной

Мы нарисовали собственную эмблему в форме ромба и проверили две редактируемые подписи шрифтом Abel Regular размером 64 единицы SVG. После загрузки нужного шрифта браузер измерил PINE примерно как 115.6 единицы, а PINE & FIELD — как 325.3 единицы. Обе строки с коррекцией запрашивают 240 единиц.

Одна длина, разная типографика

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

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

Задайте небольшую коррекцию длины

Для длинной подписи выше 330 единиц близки к естественной длине 325.3 единицы. Это более полезный пример настройки, чем принудительное сжатие до 240.

Скачайте Abel-Regular.ttf и его OFL.txt из каталога Abel в Google Fonts. Поместите их в папку fonts рядом с HTML-файлом, содержащим эту разметку, затем запустите локальный сервер для этой папки:

<style>
  @font-face {
    font-family: Abel;
    src: url('./fonts/Abel-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: 400;
  }
</style>
 
<svg xmlns="http://www.w3.org/2000/svg"
     width="540" height="136" viewBox="0 0 540 136"
     role="img" aria-label="Pine and Field emblem and label">
  <path d="M25 80L63 24L101 80L63 114Z" fill="#287967"/>
  <path d="M43 80L63 49L83 80L63 97Z" fill="#c2d998"/>
  <text id="label" x="135" y="86"
        font-family="Abel" font-size="64" font-weight="400"
        textLength="330" lengthAdjust="spacing"
        fill="#17372e">PINE &amp; FIELD</text>
</svg>

Значение 330 без указания единиц относится к системе координат SVG. Масштабирование всего SVG на странице масштабирует и это экранное расстояние. Храните эмблему и текст отдельно, чтобы изменение типографики не меняло рисунок.

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

Для максимальной ширины сначала измерьте текст

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

Поместите этот скрипт после SVG выше. Он заменяет фиксированную коррекцию до 330 единиц ограничением максимум в 240 единиц:

<script type="module">
  const label = document.querySelector('#label');
  const baseSize = 64;
  const maxWidth = 240;
 
  await document.fonts.load('64px Abel', label.textContent);
  await document.fonts.ready;
 
  label.removeAttribute('textLength');
  label.removeAttribute('lengthAdjust');
  label.setAttribute('font-size', String(baseSize));
 
  const naturalWidth = label.getComputedTextLength();
  if (naturalWidth > maxWidth) {
    const fittedSize = baseSize * maxWidth / naturalWidth;
    label.setAttribute('font-size', String(fittedSize));
  }
</script>

document.fonts.ready ожидает завершения загрузки шрифтов документа и работы по размещению. Явный вызов load() сначала запрашивает гарнитуру, используемую в примере. Измерение до загрузки нужной гарнитуры может привести к решению о вписывании на основе запасного шрифта.

Мы удаляем textLength перед вызовом getComputedTextLength(), поскольку этой ветке нужна естественная длина. В нашем браузерном тесте этот метод всё ещё сообщал естественную длину строк spacing, хотя отображаемый размах от начала до конца изменился. Не считайте его универсальным измерением скорректированной визуальной ширины.

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

Проверьте окончательную подпись в целевом приложении

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

Для нескольких строк создавайте и размещайте строки намеренно; сам textLength не задаёт правила переноса. Для изогнутого значка используйте отдельный процесс текста вдоль контура SVG. Это руководство управляет базовой линией, вдоль которой идут буквы.

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

Если исходный логотип существует только в растре, векторизатор логотипов PerfectVector может восстановить графику эмблемы. Проверьте и очистите эти контуры, затем заново наберите слова как редактируемый текст перед вписыванием подписи. Трассированное слово — геометрия контуров; textLength не может менять его межсимвольные интервалы. Наше пошаговое руководство по векторизации логотипа разбирает этот этап восстановления исходника.

Частые вопросы

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

Какое значение lengthAdjust сохраняет форму букв? Используйте spacing для изменения межсимвольных интервалов без растягивания глифов. Большая коррекция всё ещё может создать неудачные промежутки или столкновения, поэтому проверяйте буквы при конечном размере.

Может ли textLength вписать буквы, трассированные из PNG? Он работает с текстом SVG, а не контурами в форме букв. Заново наберите слова как редактируемый текст, если нужны textLength или редактируемые межсимвольные интервалы, сохраняя эмблему отдельной векторной иллюстрацией.

Источники

1. W3C — SVG 2 text adjustment — Два режима и их влияние на форму глифов и шаги глифов.
2. MDN — textLength — Требуемая длина и режим spacing по умолчанию.
3. MDN — FontFaceSet.ready — Ожидание загрузки шрифтов и размещения.
4. MDN — getComputedTextLength — Измерение текстового элемента SVG.
5. Google Fonts — Abel — Шрифт и лицензия, использованные в собственном сравнении.

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