Konvertera TTF till SVG

Här gör du om ett TrueType-typsnitt till ett SVG-typsnitt: en enda XML-fil där varje tecken är ett <glyph>-element vars kontur är skriven som SVG-bandata. Det är användbart för verktyg för ikontypsnitt och typsnittsredigerare, men det är inte samma sak som en bild av din text.

eller släpp TTF, OTF, WOFF …-filer här ·

Max 95 MB per fil· Upp till 20 filer· Raderas efter 30 minuter

Utdata

Konvertera till

Filerna bearbetas på våra servrar och raderas efter 30 minuter.

Så använder du verktyget

1
Ladda upp TTF-filen
Lägg till en eller flera .ttf-filer, upp till 20 per omgång och 95 MB per fil. Både ikontypsnitt och vanliga typsnitt fungerar.
2
Behåll SVG-typsnitt som utdata
Konvertera till är inställt på SVG-typsnitt. Hinting gäller inte för SVG, så det alternativet försvinner. Familjenamn under Avancerade inställningar byter ändå namn på typsnittet.
3
Konvertera till SVG
Klicka på Konvertera till SVG och ladda ner .svg-filen. Öppna den i en textredigerare, Inkscape eller FontForge för att komma åt glyfernas konturer.

SVG-typsnitt jämfört med SVG-bild av text

Den som söker efter TTF till SVG har två olika mål som blandas ihop. Det ena är ett SVG-typsnitt: typsnittsformatet i W3C:s rekommendation SVG 1.0 från 2001, där ett <font>-element innehåller en <glyph> per tecken med Unicode-värde, framflyttning och konturen som en bana. Det andra är en SVG-bild av en text, till exempel bokstäverna i en logotyp eller ett namn som redan är uppsatt på en rad och sparat som former. Den här konverteraren skapar det första slaget. Har du en logotypbild i stället för ett typsnitt kan PNG till SVG spåra den till banor.

När en TrueType-kontur konverteras till SVG-banedata går ingen form förlorad. SVG-banor stöder samma kvadratiska kurvor som TrueType använder, så varje kontur skrivs som den är. Det som inte följer med är allt runt konturerna: hinting-instruktioner, OpenType-funktioner utöver enkel kerning och de binära tabeller som operativsystem behöver för att installera ett typsnitt. Ett SVG-typsnitt kan inte installeras i Windows eller macOS.

Så ser en SVG-typsnittsfil ut

Förkortat exempel på koden i ett SVG-typsnitt

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

Det den här sidan skapar: en fil med en <glyph> per tecken, i typsnittsenheter med y-axeln uppåt.

Öppnas i FontForge, Inkscape och verktyg för ikontypsnitt
Går inte att installera på en dator
Läses inte in av aktuella Chrome, Edge eller Firefox

Ett vanligt OTF eller TTF med en extra SVG-tabell som innehåller färgade glyfer i lager.

Installeras som vilket typsnitt som helst
Används för emojis och flerfärgad text
Stödet varierar mellan appar och webbläsare

Var SVG-typsnitt kom ifrån och vart de tog vägen

SVG 1.0 definierar font-elementet: 2001
sista Safari på iPhone som behövde SVG-webbtypsnitt: iOS 4.1
tar bort SVG-typsnitt 2014: Chrome 38
stryker typsnittskapitlet: SVG 2

TTF

TrueType-typsnitt

TTF är typsnittsformatet TrueType, som utvecklades av Apple i slutet av 1980-talet, släpptes 1991 och licensierades till Microsoft. Det beskriver teckenkonturer med kvadratiska kurvor och innehåller hinting-instruktioner som gör att text ser skarp ut på skärmen. TrueType stöds av alla skrivbordsoperativsystem, ordbehandlare och designprogram. Det saknar vissa avancerade typografiska funktioner i OpenType och är större än webbtypsnittsformaten.

Komprimering: Förlustfri
Transparens: –
Animation: –
Introducerades: 1991 · Apple

TTF-omvandlare

SVG

Scalable Vector Graphics

SVG är ett XML-baserat vektorformat som W3C standardiserade 2001. I stället för pixlar beskriver det former, banor och text, så det förblir skarpt i alla storlekar och är oftast mycket litet för logotyper och ikoner. Det stöder transparens, CSS-formatering, skript och animation, och alla webbläsare återger det direkt. SVG lämpar sig inte för foton, och komplexa illustrationer kan bli långsamma att rendera. Illustrator, Inkscape, Figma och webbläsare kan öppna och redigera det.

Komprimering: –
Transparens: Ja
Animation: Ja
Introducerades: 2001 · W3C

SVG-omvandlare

TTF till SVG skriver varje glyfs kontur som redigerbar SVG-banedata i ett SVG-typsnitt, som används av verktyg för ikontypsnitt, typsnittsredigerare och gamla webbtypsnittspaket. Det är inte ett sätt att läsa in typsnitt på moderna webbsidor.

Vanliga frågor om TTF till SVG

Kan jag använda ett SVG-typsnitt i CSS @font-face i dag?

Nej, inte i de flesta webbläsare. Chrome tog bort stödet för SVG-typsnitt i version 38 år 2014, och Firefox och Internet Explorer har aldrig haft det. För en webbplats bör du i stället konvertera TTF-filen med TTF till WOFF2.

Varför är tecknen upp och ner när jag klistrar in dem i en teckning?

SVG-typsnitt använder typsnittets eget koordinatsystem, där y-axeln pekar uppåt från baslinjen, medan vanliga SVG-ritningar räknar y nedåt från toppen. Vänd banan vertikalt, till exempel med transformen scale(1,-1), så blir den rätt.

Hur gör jag om text till SVG-banor för Cricut eller en laserskärare?

Installera TTF-filen, skriv din text i Inkscape eller Illustrator och konvertera texten till konturer: Sökväg › Objekt till sökväg i Inkscape, Text › Skapa konturer i Illustrator. Spara sedan som SVG. Ett SVG-typsnitt innehåller varje tecken separat och är inte uppställt som ord.

Behåller SVG-typsnitt kerning och ligaturer?

Bara delvis. SVG-typsnittsformatet kan lagra kerningpar med hkern-element och glyfer med flera tecken, men har ingen motsvarighet till OpenType-funktionstabeller som kapitäler, alternativa former eller kontextuella regler. Behåll TTF-filen om du behöver dem.

Är SVG-typsnitt användbara för ikontypsnitt?

Ja, det är den främsta användningen i dag. Verktyg för ikontypsnitt som IcoMoon importerar SVG-typsnitt, så att du kan plocka ut ikoner ur ett gammalt ikontypsnitt, redigera dem och bygga en ny uppsättning eller exportera varje ikon som egen SVG.