SVG / Леттеринг

Текст в SVG: контуры и пути шрифта

Преобразуйте текст в контуры SVG с встроенными латинскими шрифтами или локальным файлом TTF, OTF или WOFF. Настройте размер, межбуквенный интервал, межстрочный интервал, выравнивание и цвета, затем скачайте SVG или PNG.

Текст в SVG: контуры и пути шрифта: Введите текст, выберите один из встроенных шрифтов или загрузите собственный файл TTF, OTF или WOFF — буквы будут преобразованы в контуры SVG. Поэтому результат будет выглядеть одинаково везде, даже если исходный шрифт не установлен. Настройте размер, межбуквенный интервал, межстрочный интервал, выравнивание, заливку и обводку, затем скопируйте SVG или скачайте SVG или PNG. Работает на 100% локально в вашем браузере, файлы на сервер не загружаются.

Категория
Инструменты для разработчиков
Запуски
В вашем браузере
Стоимость
Бесплатно · без регистрации
Доступность
Готово к использованию
Преобразование текста в контуры SVGЛокальная обработка

Полностью работает в браузере

TTF, OTF или WOFF · до 10 MB

Загрузка шрифта…

Здесь начинается ваш текст.Введите текст, чтобы создать редактируемые контуры.

Встроенные латинские шрифты распространяются по лицензии SIL Open Font Licence. Загруженные шрифты остаются на вашем устройстве; вы отвечаете за соблюдение условий их лицензий. Кернинг включён. Формирование сложных письменностей зависит от шрифта и парсера. Экспорт PNG ограничен 4096 пикселями по длинной стороне.

Редактировать фигуры SVG

Контуры SVG

Спецификация контуров SVG 2 определяет команды контуров и замкнутые подконтуры. https://www.w3.org/TR/SVG2/paths.html

Парсер шрифтов

Шрифты читаются в вашем браузере с помощью opentype.js 2.0.0 — библиотеки с открытым исходным кодом по лицензии MIT. Файлы WOFF2 не поддерживаются: сначала преобразуйте их в WOFF, TTF или OTF. Некоторые расширенные возможности шрифтов, например контекстные альтернативы и отдельные таблицы кернинга, не применяются, поэтому интервалы могут немного отличаться от текстового редактора. https://github.com/opentypejs/opentype.js

Источники встроенных шрифтов

Неизменённые файлы Latin WOFF взяты из пакетов Fontsource: https://fontsource.org/fonts/inter ; https://fontsource.org/fonts/oswald ; https://fontsource.org/fonts/pacifico ; https://fontsource.org/fonts/lobster . Уведомление об авторских правах и полный текст лицензии SIL Open Font для каждого шрифта опубликованы рядом с файлами шрифтов.

Как пользоваться

  1. Введите текст и выберите встроенный шрифт либо перетащите собственный файл шрифта.
  2. Настройте размер, интервалы, выравнивание, заливку и обводку, затем проверьте контуры.
  3. Скопируйте или скачайте пути SVG либо экспортируйте PNG.

Конфиденциальность и ограничения

Текст и загруженные шрифты остаются в вашем браузере. Встроенные файлы WOFF загружаются с этого сайта; внешние сервисы шрифтов не используются.

Похожие инструменты

Редактор SVGSVG-волнаSVG-блоб

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

Какие шрифты встроены?

Inter и Oswald в обычном и полужирном начертании, а также Pacifico и Lobster в обычном начертании. Эти латинские подмножества распространяются без изменений по лицензии SIL OFL 1.1. Лицензия на каждый шрифт находится в /fonts/text-to-svg/. За лицензии на загруженные шрифты отвечаете вы.

Почему некоторые надписи могут отличаться от результата в моём графическом редакторе?

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

Можно ли редактировать текст в SVG?

Нет. SVG содержит контуры и для отображения не требует исходного шрифта. Пустые строки влияют на расстояние между базовыми линиями, а viewBox обрезается по видимой области изображения. Для PNG максимальная длина стороны ограничена 4096 пикселями.

Бесплатный инструмент · запусков: в вашем браузере · аккаунт не нужен