Текст вдоль контура SVG: редактируемые буквы значка

Чтобы поместить текст SVG вдоль контура, определите контур с ID, сошлитесь на него из <textPath> внутри <text> и напишите слова между тегами. Для центрирования букв сочетайте startOffset="50%" с text-anchor="middle". Храните эмблему в отдельной группе, чтобы менять слова без перестройки графики.

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

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

Начните с трёх отдельных частей

Значку нужны эмблема, направляющий контур и следующий вдоль него текст. Направляющая управляет положением букв; в готовом дизайне она не обязана быть видимой. Справочник MDN по textPath описывает связь href между текстом и контуром.

Для примера ниже мы нарисовали простую сосну и полукруглую направляющую кодом SVG. Обе — собственная демонстрационная графика, а не результат преобразования PerfectVector. Значок содержит слова PINE TRAIL CLUB; буквы остаются текстовой строкой на всех этапах построения.

Постройте редактируемый значок

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

<svg xmlns="http://www.w3.org/2000/svg"
     width="400" height="400" viewBox="0 0 400 400"
     role="img" aria-labelledby="badge-title">
  <title id="badge-title">Pine Trail Club badge</title>
  <defs>
    <path id="badge-arc"
          d="M70 215 A130 130 0 0 1 330 215" />
  </defs>
 
  <circle cx="200" cy="205" r="166"
          fill="#f8f3e7" stroke="#214b41" stroke-width="6" />
  <g id="emblem" fill="#214b41">
    <path d="M200 150 148 220 175 220 133 273
             267 273 225 220 252 220Z" />
    <path d="M188 269H212V303H188Z" />
  </g>
 
  <text fill="#214b41" font-family="Georgia, serif"
        font-size="29" text-anchor="middle">
    <textPath href="#badge-arc" startOffset="50%">PINE TRAIL CLUB</textPath>
  </text>
</svg>

Контур начинается в (70, 215) и идёт по верхнему полукругу к (330, 215). Его радиус — 130 единиц. Размещение контура в <defs> делает его доступным для ссылки без рисования видимой обводки. Светлый внешний круг — отдельная нарисованная фигура.

Замените PINE TRAIL CLUB своим коротким названием, сохраните и перезагрузите. Дерево должно оставаться неподвижным, а новые слова — следовать той же направляющей. Длинному названию нужна новая проверка вписывания; центрирование не заставляет произвольный текст помещаться на дуге.

Центрируйте и смещением, и привязкой

startOffset="50%" ставит опорное положение текста посередине контура. text-anchor="middle" совмещает середину текста с этим положением. Один параметр выбирает позицию на кривой; другой — часть текста, которая там располагается. Справочник startOffset и справочник text-anchor описывают эти средства управления.

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

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

Проверьте направление контура перед перемещением текста

Разверните именно эту верхнюю дугу, заменив её d на:

d="M330 215 A130 130 0 0 0 70 215"

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

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

Выберите шрифт перед окончательными интервалами

Пример запрашивает Georgia, затем универсальную запасную гарнитуру serif. Этот запрос не встраивает шрифт в SVG. Рендерер выбирает доступную гарнитуру из списка, как описывает справочник MDN по font-family.

В нашей демонстрации Chromium переключение тех же слов с Georgia, serif на Arial, sans-serif изменило измеренную ширину набора текста. Дуга и эмблема остались прежними. Важна проверка занятого пространства и вида букв, а не конкретной ширины, которую другой компьютер может отрисовать иначе.

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

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

Восстановите только графику, которой нужна трассировка

Если эмблема существует только внутри PNG или JPG, отделите восстановление графики от типографики. Используйте копию исходника, максимально чисто выделяющую эмблему. Сохраните полный оригинал как визуальный эталон при восстановлении значка.

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

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

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

Сохраните редактируемый оригинал и сделайте копию для передачи

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

В настройках сохранения SVG Illustrator Convert To Outlines преобразует текст в контуры. Adobe также предупреждает, что экспортированный текст вдоль контура может по-разному отображаться в просмотрщиках SVG. Это причины проверить экспортированную копию в целевом приложении, а не гарантия воспроизведения всего значка любым последующим инструментом. См. документацию Adobe по сохранению SVG.

Используйте такую последовательность передачи:

1. Сохраните оригинал с редактируемым текстом перед переводом чего-либо в контуры.
2. Подтвердите слова, шрифт, направление контура, центрирование и интервалы.
3. Создайте отдельную копию для передачи и переведите её текст в контуры в редакторе.
4. Заново откройте копию и сравните все буквы, просветы, промежутки и эмблему.
5. Проверьте значок при нужном размере вывода в принимающем приложении.

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

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

Почему текст SVG не центрирован вдоль контура? Для центрированного примера используйте startOffset="50%" вместе с text-anchor="middle". Смещение 50% с привязкой start начинает фразу посередине направляющей. Также проверьте форму контура и вписывание всех слов.

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

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

Источники

1. MDN — textPath — Соединение редактируемого текста с контуром, на который он ссылается.
2. MDN — startOffset — Размещение текста вдоль направляющей.
3. MDN — text-anchor — Выравнивание текста относительно опорного положения.
4. W3C — SVG 2 text — Размещение глифов и правила текста вдоль контура.
5. MDN — font-family — Доступные шрифты и выбор запасной гарнитуры.
6. Adobe — Save artwork in Illustrator — Перевод текста SVG в контуры и ограничения экспорта текста вдоль контура.

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