Конвертер TTF в SVG

Эта страница превращает шрифт TrueType в SVG-шрифт: один XML-файл, в котором каждый символ — это элемент <glyph> с контуром, записанным как данные пути SVG. Это полезно для инструментов иконочных шрифтов и редакторов шрифтов, но это не то же самое, что картинка с вашим текстом.

или перетащите сюда файлы TTF, OTF, WOFF … ·

Макс. 95 MB на файл· До 20 файлов· Удаляются через 30 минут

Вывод

Преобразовать в

Файлы обрабатываются на наших серверах и удаляются через 30 минут.

Символы

Оставить символы

Удаление неиспользуемых систем письма может уменьшить веб-шрифт с сотен КБ до менее чем 30 КБ. Для шрифтов, которые устанавливаются на компьютер, оставьте все символы.

Отрисовка и веб

Название шрифта

Имя семейства

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

Имя начертания

Например, Regular, Bold, Italic. Оставьте поле пустым, чтобы сохранить исходное имя начертания.

Как пользоваться инструментом

1
Загрузите TTF
Добавьте один или несколько файлов .ttf: до 20 за раз, не более 95 MB каждый. Подходят и шрифты-иконки, и текстовые шрифты.
2
Оставьте на выходе SVG-шрифт
В поле Преобразовать в выбран SVG-шрифт. Хинтинг для SVG не применяется, поэтому эта опция скрыта; Имя семейства в разделе Расширенные настройки по-прежнему позволяет переименовать шрифт.
3
Конвертируйте в SVG
Нажмите Конвертировать в SVG и скачайте файл .svg. Откройте его в текстовом редакторе, Inkscape или FontForge, чтобы добраться до контуров глифов.

SVG-шрифт и SVG-изображение текста

По запросу «TTF в SVG» смешиваются две разные задачи. Первая — SVG-шрифт: формат шрифта из рекомендации W3C SVG 1.0 от 2001 года, где элемент <font> содержит по одному <glyph> на символ со значением Unicode, шириной продвижения и контуром в виде path. Вторая — SVG-картинка с текстом: буквы логотипа или имени, уже набранные в строку и сохранённые как фигуры. Этот конвертер создаёт первый вариант. Если у вас не шрифт, а изображение логотипа, PNG в SVG превратит его в контуры трассировкой.

При переводе контуров TrueType в данные SVG path форма не теряется. Пути SVG поддерживают те же квадратичные кривые, что и TrueType, поэтому каждый контур записывается как есть. Не сохраняется всё, что вокруг контуров: инструкции хинтинга, функции OpenType сверх простого кернинга и двоичные таблицы, нужные системе для установки шрифта. SVG-шрифт нельзя установить в Windows или macOS.

Как выглядит файл SVG-шрифта

Сокращённый пример разметки SVG-шрифта

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <font id="BrandSans" horiz-adv-x="1229">
      <font-face font-family="Brand Sans" units-per-em="2048" ascent="1638" descent="-410" />
      <!-- Глиф буквы L -->
      <glyph unicode="L" glyph-name="L" horiz-adv-x="1100" d="M180 0V1456H360V160H1040V0Z" />
    </font>
  </defs>
</svg>

Что создаёт эта страница: один файл, по одному <glyph> на символ, в единицах шрифта с осью y, направленной вверх.

Открывается в FontForge, Inkscape и инструментах для шрифтов-иконок
Не устанавливается на компьютер
Не загружается современными Chrome, Edge и Firefox

Обычный OTF или TTF с дополнительной таблицей SVG, где хранятся цветные многослойные глифы.

Устанавливается как любой шрифт
Используется для эмодзи и многоцветных надписей
Поддержка зависит от приложения и браузера

Откуда появились SVG-шрифты и куда они исчезли

SVG 1.0 определяет элемент font: 2001
последний iPhone Safari, которому нужны были SVG-шрифты: iOS 4.1
удаляет SVG-шрифты в 2014 году: Chrome 38
исключает раздел о шрифтах: SVG 2

TTF

Шрифт TrueType

TTF — формат шрифтов TrueType, разработанный Apple в конце 1980-х годов, выпущенный в 1991 году и затем лицензированный Microsoft. Он описывает контуры глифов квадратичными кривыми и содержит инструкции хинтинга, благодаря которым текст выглядит чётко на экране. TrueType поддерживают все настольные операционные системы, текстовые редакторы и дизайнерские программы. В нём нет некоторых продвинутых типографских возможностей OpenType, а файлы больше, чем у веб-форматов шрифтов.

Сжатие: Без потерь
Прозрачность: –
Анимация: –
Год появления: 1991 · Apple

Конвертер TTF

SVG

Scalable Vector Graphics

SVG — векторный формат на основе XML, стандартизированный W3C в 2001 году. Вместо пикселей он описывает фигуры, контуры и текст, поэтому остаётся чётким при любом размере и для логотипов и иконок обычно весит совсем немного. Он поддерживает прозрачность, стили CSS, скрипты и анимацию, и все браузеры отображают его без дополнений. SVG не подходит для фотографий, а сложные иллюстрации могут медленно отрисовываться. Открывать и редактировать его могут Illustrator, Inkscape, Figma и браузеры.

Сжатие: –
Прозрачность: Да
Анимация: Да
Год появления: 2001 · W3C

Конвертер SVG

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

Вопросы о конвертации TTF в SVG

Можно ли сегодня использовать SVG-шрифт в CSS @font-face?

В большинстве браузеров нет. Chrome удалил поддержку SVG-шрифтов в версии 38 в 2014 году, а Firefox и Internet Explorer её так и не добавили. Для сайта лучше конвертируйте TTF через TTF в WOFF2.

Почему глифы перевернуты, когда я вставляю их в рисунок?

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

Как превратить текст в контуры SVG для Cricut или лазерного резака?

Установите TTF, наберите текст в Inkscape или Illustrator и переведите его в кривые: Контур › Объект в контур в Inkscape, Type › Create Outlines в Illustrator. Сохраните результат как SVG. SVG-шрифт хранит каждую букву отдельно и не содержит готовых слов.

Сохраняют ли SVG-шрифты кернинг и лигатуры?

Только частично. Формат SVG-шрифта может хранить пары кернинга через элементы hkern и глифы из нескольких символов, но в нём нет аналога таблиц функций OpenType, таких как капитель, альтернативные начертания или контекстные правила. Если они нужны, сохраните TTF.

Подходит ли SVG-шрифт для иконочных шрифтов?

Да, сегодня это основное применение. Инструменты для шрифтов-иконок, например IcoMoon, импортируют SVG-шрифты: так можно достать значки из старого шрифта-иконок, отредактировать их и собрать новый набор или экспортировать каждый значок как отдельный SVG.