Softonic

Генератор круговых текстов для SVG

Шаг 1 / 2
Далее

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

Как изогнуть текст по окружности

  1. 1

    Введите текст

    Наилучшим образом читаются короткие фразы (3–8 слов); длинные предложения изгибаются по малому радиусу.

  2. 2

    Установите радиус

    Чем больше радиус кривой, тем более мягкая она и тем легче читаются буквы; при слишком малом радиусе буквы сильно наклоняются.

  3. 3

    Переместите начальную позицию

    Начальный сдвиг % перемещает первый символ вдоль пути. Это положение на пути, а не свободное управление углом поворота.

  4. 4

    Настройте размер, интервал и направление

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

  5. 5

    Копируйте SVG

    Результат включения включает невидимый путь, элемент `<textPath>` и оформление шрифта; он готов к использованию на любой странице.

Как работает textPath в деталях

<svg viewBox="0 0 300 300">
  <defs>
    <path id="ring" d="M 150,150 m -100,0 a 100,100 0 1,1 200,0 a 100,100 0 1,1 -200,0" />
  </defs>
  <text font-family="Inter" font-size="24" font-weight="700">
    <textPath href="#ring" startOffset="50%" text-anchor="middle">
      CDEM SOLUTIONS . EST 2024 .
    </textPath>
  </text>
</svg>

Атрибут d использует команды m/a (moveto / arc) для построения полного круга; затем <textPath> размещает строку вдоль этого круга; startOffset определяет процентное положение текста относительно пути; text-anchor="middle" центрирует текст в указанной точке.

Объём текста против его читаемости

Радиус (пикс) Ощущение Подходит для
40–60 Очень плотные, искажённые Только абстрактные логотипы
80–120 Классический значок Иконки приложений, монеты
140–200 Спокойный дуговой шрифт Логотипы и гербовые изображения кофе
более 250 Почти прямая линия Декорация заголовка

Типичные настройки

– Верхняя дуга: начинается в точке 180° и охватывает весь радиус круга на расстоянии 180°; верхняя часть читается слева направо. – «Нижний дуговой элемент с переворотом»: обратите направление пути или используйте код side="right", чтобы текст правильно отображался в перевёрнутом положении. – «Полный кольцо»: текст переносится один раз. Добавьте передний и задний отступы (.), чтобы точка соединения не выглядела нелогично.

Советы по экспорту

– Функция inline SVG позволяет задать цвет заполнения с использованием значения currentColor или пользовательской CSS-войности. Не вставляйте вебный шрифт непосредственно в файл SVG, объявите его в глобальном CSS, чтобы браузер повторно использовал этот шрифт при загрузке. – Если вам нужна статическая изображение (формат PNG или фавикон), преобразуйте файл в формат SVG с помощью растровизатора до требуемого размера: SVG масштабируется без потерь, однако некоторые платформы всё ещё требуют битмап-формата.

Часто задаваемые вопросы

По умолчанию textPath следует направлению пути. Круг, нанесённый по часовой стрелке, делает нижнюю половину текста перевёрнутой. Для этого можно нанести нижнюю часть в виде отдельного дуги против часовой стрелки, использовать side="right" (SVG 2) или разделить текст на два элемента.

Да. Сгенерированный элемент <text> поддерживает стандартные атрибуты SVG/CSS: fill, font-weight, font-style и letter-spacing; их можно изменить как внутри самого элемента, так и с помощью внешнего CSS.

Функция <textPath> поддерживается в браузерах Chrome, Firefox, Safari и Edge уже более десяти лет. В IE11 она реализована только частично; если вам она всё ещё необходима, предварительно растеризуйте соответствующий значок.

Добавьте letter-spacing="2" (или несколько других элементов) к тексту. При малом радиусе это может значительно улучшить читаемость.

Нет. Текст и SVG создаются в браузере. Фраза не отправляется на сервер и не сохраняется.

Сопутствующие инструменты

Сжать GIF

Уменьшайте анимированные GIF прямо в браузере: снижайте размеры, оставляйте меньше кадров и настраивайте качество кодирования. Проверьте петлю перед скачиванием.

Палитра цветов Material Design

Просмотрите палитру цветов Material Design. Копируйте любой оттенок (от 50 до A700) в форматах HEX, RGB или HSL одним нажатием.

Конструктор тир-листов

Создайте приватный тир-лист из текста и локальных изображений. Настройте уровни, распределите элементы мышью или клавиатурой и экспортируйте в JSON, PNG или SVG.

Конвертер JPG в Word

Конвертируйте JPG-фото или скриншот текста в редактируемый документ Word. Инструмент считывает слова с помощью OCR и раскладывает их, чтобы вы могли переписать, отформатировать и переиспользовать их.

Генератор надписей граффити

Создавайте надписи в стилях тег, баббл, блок, трафарет, неон и вайлд. Настраивайте цвета и экспортируйте PNG или SVG прямо в браузере.

Конструктор флагов

Создайте в браузере простой собственный флаг 3:2 с шестью компоновками, цветами, текстом и символом. Скачайте SVG или PNG либо откройте диалог печати браузера.

Инструмент доступен на других языках