Konwerter TTF na SVG

Ta strona zamienia czcionkę TrueType na czcionkę SVG: jeden plik XML, w którym każdy znak jest elementem <glyph> z konturem zapisanym jako dane ścieżki SVG. Przydaje się to w narzędziach do fontów ikonowych i edytorach czcionek, ale nie jest tym samym co obraz Twojego tekstu.

lub upuść Pliki TTF, OTF, WOFF … tutaj ·

Maks. 95 MB na plik· Do 20 plików· Usuwane po 30 min

Plik wynikowy

Konwertuj na

Pliki są przetwarzane na naszych serwerach i usuwane po 30 min.

Jak korzystać z narzędzia

1
Prześlij plik TTF
Dodaj jeden lub więcej plików .ttf, maksymalnie 20 w jednej partii i po 95 MB każdy. Działają zarówno czcionki ikon, jak i czcionki tekstowe.
2
Pozostaw czcionkę SVG jako format wyjściowy
Opcja Konwertuj na jest ustawiona na czcionkę SVG. Hinting nie dotyczy wyniku SVG, więc ta opcja znika; Nazwa rodziny w sekcji Ustawienia zaawansowane nadal zmienia nazwę czcionki.
3
Konwertuj do SVG
Kliknij Konwertuj na SVG i pobierz plik .svg. Otwórz go w edytorze tekstu, Inkscape lub FontForge, aby dotrzeć do ścieżek glifów.

Czcionka SVG a obraz SVG z tekstem

Po wyszukaniu TTF na SVG znajdziesz dwa różne cele wymieszane ze sobą. Pierwszy to czcionka SVG: format czcionki zdefiniowany w rekomendacji W3C SVG 1.0 z 2001 roku, w którym element <font> zawiera element <glyph> dla każdego znaku, z wartością Unicode, szerokością przesunięcia i konturem jako ścieżką. Drugi to obraz SVG z tekstem, czyli litery logo lub nazwy już złożone w linię i zapisane jako kształty. Ten konwerter tworzy pierwszy rodzaj. Jeśli masz obraz logo, a nie czcionkę, PNG na SVG zamieni go na ścieżki metodą wektoryzacji.

Konwersja konturu TrueType na dane ścieżki SVG nie powoduje utraty kształtu. Ścieżki SVG obsługują te same krzywe kwadratowe, których używa TrueType, więc każdy kontur jest zapisany bez zmian. Nie przetrwa natomiast wszystko wokół konturów: instrukcje hintingu, funkcje OpenType wykraczające poza proste kerning oraz tablice binarne potrzebne systemom do instalacji czcionki. Czcionki SVG nie da się zainstalować w Windows ani macOS.

Jak wygląda plik czcionki SVG

Skrócony przykład znaczników w czcionce SVG

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <font id="FirmowySans" horiz-adv-x="1229">
      <font-face font-family="Firmowy Sans" units-per-em="2048" ascent="1638" descent="-410" />
      <glyph unicode="Ł" glyph-name="Lslash" horiz-adv-x="1100" d="M180 0V1456H360V160H1040V0Z" />
    </font>
  </defs>
</svg>

To, co tworzy ta strona: jeden plik, jeden <glyph> na znak, w jednostkach czcionki z osią y skierowaną w górę.

Otwiera się w FontForge, Inkscape i narzędziach do czcionek ikon
Nie można jej zainstalować na komputerze
Nie jest ładowana przez obecne Chrome, Edge ani Firefox

Zwykły OTF lub TTF z dodatkową tablicą SVG zawierającą kolorowe, warstwowe glify.

Instaluje się jak każda czcionka
Używana do emoji i wielokolorowych napisów
Obsługa zależy od aplikacji i przeglądarki

Skąd wzięły się czcionki SVG i co się z nimi stało

SVG 1.0 definiuje element font: 2001
ostatni Safari na iPhone'a wymagający czcionek webowych SVG: iOS 4.1
usuwa czcionki SVG w 2014 roku: Chrome 38
usuwa rozdział o czcionkach: SVG 2

TTF

Czcionka TrueType

TTF to format czcionek TrueType opracowany przez Apple pod koniec lat 80. i wydany w 1991 roku, a następnie licencjonowany firmie Microsoft. Opisuje kontury znaków za pomocą krzywych kwadratowych i zawiera instrukcje hintingu, dzięki którym tekst wygląda ostro na ekranie. TrueType obsługuje każdy system desktopowy, edytor tekstu i aplikacja graficzna. Brakuje mu niektórych zaawansowanych funkcji typograficznych OpenType, a pliki są większe niż w formatach czcionek internetowych.

Kompresja: Bezstratna
Przezroczystość: –
Animacja: –
Rok powstania: 1991 · Apple

Konwerter TTF

SVG

Scalable Vector Graphics

SVG to format wektorowy oparty na XML, ustandaryzowany przez W3C w 2001 roku. Zamiast pikseli opisuje kształty, ścieżki i tekst, dzięki czemu pozostaje ostry w każdym rozmiarze i zwykle jest malutki w przypadku logo i ikon. Obsługuje przezroczystość, style CSS, skrypty i animacje, a każda przeglądarka renderuje go natywnie. SVG nie nadaje się do zdjęć, a złożone ilustracje mogą się wolno renderować. Otwierają i edytują go Illustrator, Inkscape, Figma i przeglądarki.

Kompresja: –
Przezroczystość: Tak
Animacja: Tak
Rok powstania: 2001 · W3C

Konwerter SVG

TTF na SVG zapisuje kontur każdego glifu jako edytowalne dane ścieżki SVG wewnątrz czcionki SVG, której używają narzędzia do czcionek ikon, edytory czcionek i stare zestawy czcionek webowych; nie służy do ładowania czcionek na nowoczesnych stronach.

TTF na SVG — najczęstsze pytania

Czy czcionkę SVG można dziś użyć w CSS @font-face?

W większości przeglądarek nie. Chrome usunął obsługę czcionek SVG w wersji 38 w 2014 roku, a Firefox i Internet Explorer nigdy jej nie dodały. Na stronę internetową zamiast tego skonwertuj TTF za pomocą TTF na WOFF2.

Dlaczego glify są do góry nogami po wklejeniu do rysunku?

Czcionki SVG używają własnego układu współrzędnych czcionki, w którym oś y biegnie w górę od linii bazowej, podczas gdy zwykłe rysunki SVG liczą y w dół od góry. Odwróć ścieżkę w pionie, na przykład transformacją scale(1,-1), a będzie wyglądać poprawnie.

Jak zamienić tekst na ścieżki SVG dla Cricut lub plotera laserowego?

Zainstaluj TTF, wpisz tekst w Inkscape lub Illustratorze i zamień go na krzywe: w Inkscape Ścieżka › Obiekt na ścieżkę, w Illustratorze Tekst › Zamień na krzywe. Zapisz wynik jako SVG. Czcionka SVG zawiera każdą literę osobno i nie jest ułożona w słowa.

Czy czcionki SVG zachowują kerning i ligatury?

Tylko częściowo. Format czcionki SVG może przechowywać pary kerningowe w elementach hkern oraz glify wieloznakowe, ale nie ma odpowiednika tablic funkcji OpenType, takich jak kapitaliki, warianty alternatywne czy reguły kontekstowe. Jeśli ich potrzebujesz, zachowaj TTF.

Czy czcionka SVG przydaje się do fontów ikonowych?

Tak, to dziś jej główne zastosowanie. Narzędzia do czcionek ikon, takie jak IcoMoon, importują czcionki SVG, dzięki czemu możesz wyciągnąć ikony ze starej czcionki ikon, edytować je i zbudować nowy zestaw lub wyeksportować każdą ikonę jako osobny SVG.