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

Ця сторінка перетворює шрифт TrueType на SVG-шрифт: один XML-файл, у якому кожен символ є елементом <glyph>, а його контур записано як дані шляху SVG. Це зручно для інструментів іконкових шрифтів і редакторів шрифтів, але це не зображення вашого тексту.

або перетягніть Файли TTF, OTF, WOFF … сюди ·

До 95 МБ на файл· До 20 файлів· Видаляються через 30 хв

Результат

Конвертувати в

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

Символи

Залишити символи

Видалення писемностей, які ви не використовуєте, може зменшити веб-шрифт із сотень КБ до менш ніж 30 KB. Для шрифтів, які ви встановлюєте на комп'ютер, залишайте всі символи.

Рендеринг і веб

Назва шрифту

Назва сімейства

Залиште порожнім, щоб зберегти оригінальну назву. Перейменування дає змогу встановити конвертований шрифт поруч з оригіналом без конфлікту.

Назва накреслення

Наприклад, Regular, Bold, Italic. Залиште порожнім, щоб зберегти оригінальну назву стилю.

Як користуватися цим інструментом

1
Виберіть файл TTF
Додайте один або кілька файлів .ttf: до 20 за раз, до 95 MB кожен. Підходять і шрифти з піктограмами, і текстові шрифти.
2
Залиште SVG-шрифт як вихідний формат
У полі Конвертувати в вибрано SVG font. Хінтинг для 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 не змінює форму. Контури SVG підтримують ті самі квадратичні криві, що й TrueType, тому кожен контур записується як є. Не зберігається все, що навколо контурів: інструкції хінтингу, функції OpenType, крім простого кернінгу, і двійкові таблиці, потрібні операційним системам для встановлення шрифту. SVG-шрифт не можна встановити в Windows чи macOS.

Який вигляд має файл SVG-шрифту

Скорочений приклад розмітки в SVG-шрифті

<!-- Скорочено: показано лише гліф «L» -->
<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" />
      <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
остання версія Safari на iPhone, якій потрібні були SVG-шрифти: iOS 4.1
прибирає SVG-шрифти у 2014 році: Chrome 38
прибирає розділ про шрифти: SVG 2

TTF

Шрифт TrueType

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

Стиснення: Без втрат
Прозорість: –
Анімація: –
Рік появи: 1991 · Apple

Конвертер TTF

SVG

Масштабована векторна графіка (SVG)

SVG — векторний формат на основі XML, стандартизований W3C у 2001 році. Замість пікселів він описує фігури, контури та текст, тож залишається чітким за будь-якого розміру, а для логотипів і значків зазвичай дуже малий. Підтримує прозорість, стилі CSS, скрипти та анімацію, а кожен браузер відображає його нативно. SVG не підходить для фотографій, а складні ілюстрації можуть повільно відображатися. Відкрити й редагувати його можна в Illustrator, Inkscape, Figma та браузерах.

Стиснення: –
Прозорість: Так
Анімація: Так
Рік появи: 2001 · W3C

Конвертер SVG

TTF у SVG записує контур кожного гліфа як редаговані дані контуру SVG усередині 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 і перетворіть його на контури: Контур › Об’єкт у контур (Path › Object to Path) в Inkscape, Type › Create Outlines в Illustrator. Збережіть результат як SVG. SVG-шрифт містить кожну літеру окремо і не розташовує їх у слова.

Чи зберігають SVG-шрифти кернінг і лігатури?

Лише частково. Формат SVG-шрифту може зберігати пари кернінгу через елементи hkern і гліфи з кількох символів, але в ньому немає аналога таблиць функцій OpenType, як-от капітель, альтернативні гліфи чи контекстні правила. Якщо вони потрібні, залиште TTF.

Чи корисний SVG-шрифт для іконкових шрифтів?

Так, сьогодні це його основне призначення. Інструменти для шрифтів із піктограмами, як-от IcoMoon, імпортують SVG-шрифти, тож можна дістати піктограми зі старого шрифту, відредагувати їх і зібрати новий набір або експортувати кожну піктограму окремим SVG.