Převodník TTF do SVG

Tato stránka převede font TrueType do SVG fontu: jednoho souboru XML, ve kterém je každý znak prvkem <glyph> s obrysem zapsaným jako data cesty SVG. Hodí se to pro nástroje na ikonové fonty a editory písem, ale nejde o obrázek vašeho textu.

nebo sem přetáhněte soubory TTF, OTF, WOFF … ·

Max. 95 MB na soubor· Až 20 souborů· Smazáno po 30 minutách

Výstup

Převést na

Soubory se zpracovávají na našich serverech a po 30 minutách se smažou.

Jak nástroj používat

1
Nahrajte soubor TTF
Přidejte jeden nebo více souborů .ttf, nejvýše 20 v jedné dávce a každý do 95 MB. Fungují ikonové fonty i textové fonty.
2
Ponechte jako výstup SVG font
Možnost Převést na je nastavena na SVG font. Hinting se u výstupu SVG nepoužívá, takže tato volba zmizí; Název rodiny v části Pokročilá nastavení font stále přejmenuje.
3
Převeďte do SVG
Klikněte na Převést na SVG a stáhněte soubor .svg. Otevřete ho v textovém editoru, Inkscape nebo FontForge, kde se dostanete k cestám jednotlivých glyfů.

SVG font vs. obrázek textu ve formátu SVG

Když hledáte TTF do SVG, najdete dva různé cíle promíchané dohromady. Jedním je SVG font: formát fontu definovaný v doporučení W3C SVG 1.0 z roku 2001, kde prvek <font> obsahuje pro každý znak prvek <glyph> s hodnotou Unicode, šířkou posunu a obrysem jako cestou. Druhým je SVG obrázek textu, tedy písmena loga nebo jména, která jsou již sestavena do řádku a uložena jako tvary. Tento převodník vytváří první druh. Pokud máte místo fontu obrázek loga, PNG do SVG ho místo toho vektorizuje do cest.

Převod obrysu TrueType na data cesty SVG nic neztrácí na tvaru. Cesty SVG podporují stejné kvadratické křivky jako TrueType, takže se každá kontura zapíše tak, jak je. Nezachová se vše kolem obrysů: instrukce hintingu, funkce OpenType nad rámec jednoduchého kerningu a binární tabulky, které operační systémy potřebují k instalaci fontu. SVG font nelze nainstalovat ve Windows ani macOS.

Jak vypadá soubor SVG fontu

Zkrácená ukázka kódu v SVG fontu

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <font id="FiremniSans" horiz-adv-x="1229">
      <font-face font-family="Firemní 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>

Co vytváří tato stránka: jeden soubor, jeden <glyph> na znak, v jednotkách fontu s osou y míří nahoru.

Otevře se ve FontForge, Inkscape a nástrojích pro ikonové fonty
Nelze nainstalovat do počítače
Aktuální Chrome, Edge ani Firefox ho nenačtou

Běžný OTF nebo TTF s další tabulkou SVG, která obsahuje barevné vrstvené glyfy.

Instaluje se jako každý jiný font
Používá se pro emoji a vícebarevné písmo
Podpora se liší podle aplikace a prohlížeče

Odkud se SVG fonty vzaly a kam zmizely

SVG 1.0 definuje prvek font: 2001
poslední Safari na iPhonu, které potřebovalo SVG webfonty: iOS 4.1
odstraňuje SVG fonty v roce 2014: Chrome 38
vypouští kapitolu o fontech: SVG 2

TTF

Písmo TrueType

TTF je formát písem TrueType, který vyvinul Apple koncem 80. let, vydal v roce 1991 a poté licencoval Microsoftu. Obrysy znaků popisuje kvadratickými křivkami a obsahuje hinting, díky němuž je text na obrazovce ostrý. TrueType podporuje každý desktopový operační systém, textový procesor i návrhářská aplikace. Chybí mu některé pokročilé typografické funkce OpenTypu a je větší než webové formáty písem.

Komprese: Bezztrátová
Průhlednost: –
Animace: –
Představeno: 1991 · Apple

Převodník TTF

SVG

Scalable Vector Graphics

SVG je vektorový formát založený na XML, který W3C standardizovalo v roce 2001. Místo pixelů popisuje tvary, křivky a text, takže zůstává ostrý v libovolné velikosti a u log a ikon bývá drobný. Podporuje průhlednost, stylování pomocí CSS, skriptování a animace a každý prohlížeč ho zobrazí nativně. Pro fotografie SVG nevyhovuje a složité ilustrace se mohou vykreslovat pomalu. Otevřou a upraví ho Illustrator, Inkscape, Figma i prohlížeče.

Komprese: –
Průhlednost: Ano
Animace: Ano
Představeno: 2001 · W3C

Převodník SVG

TTF do SVG zapíše obrys každého glyfu jako upravitelná data cesty SVG uvnitř SVG fontu, který využívají nástroje pro ikonové fonty, editory fontů a staré sady webfontů; není to způsob, jak načítat fonty na moderních webech.

Časté otázky k převodu TTF do SVG

Lze dnes použít SVG font v CSS @font-face?

Ve většině prohlížečů ne. Chrome podporu SVG fontů odstranil ve verzi 38 v roce 2014 a Firefox ani Internet Explorer ji nikdy nepřidaly. Pro web raději převeďte TTF pomocí TTF do WOFF2.

Proč jsou glyfy po vložení do kresby vzhůru nohama?

SVG fonty používají vlastní souřadnicový systém fontu, kde osa y míří od účaří nahoru, zatímco běžné kresby v SVG počítají y směrem dolů od horního okraje. Cestu otočte svisle, například transformací scale(1,-1), a bude vypadat správně.

Jak převést text na cesty SVG pro Cricut nebo laserovou řezačku?

Nainstalujte TTF, napište text v Inkscape nebo Illustratoru a převeďte ho na křivky: v Inkscape Cesta › Objekt na cestu, v Illustratoru Text › Vytvořit obrysy. Uložte jako SVG. SVG font obsahuje každé písmeno zvlášť a není sestavený do slov.

Zachovávají SVG fonty vyrovnání párů (kerning) a ligatury?

Jen částečně. Formát SVG fontu umí ukládat kerningové dvojice pomocí prvků hkern a glyfy z více znaků, ale nemá obdobu tabulek funkcí OpenType, jako jsou kapitálky, alternativy nebo kontextová pravidla. Potřebujete-li je, ponechte si TTF.

Hodí se výstup do SVG fontu pro ikonové fonty?

Ano, dnes je to jeho hlavní využití. Nástroje pro ikonové fonty, například IcoMoon, SVG fonty importují, takže můžete z.starého ikonového fontu vytáhnout ikony, upravit je a sestavit novou sadu nebo exportovat každou ikonu jako samostatné SVG.