TTF til SVG-konverter

Q: Beholder SVG-fonter kerning og ligaturer?

Bare delvis. SVG-fontformatet kan lagre kerningpar med `hkern`-elementer og glyfer med flere tegn, men har ingen tilsvarende OpenType-funksjonstabeller som kapitéler, alternativer eller kontekstregler. Behold TTF-filen hvis du trenger dem.

Denne siden gjør om en TrueType-font til en SVG-font: én XML-fil der hvert tegn er et <glyph>-element med omrisset skrevet som SVG-banedata. Det er nyttig for ikonfontverktøy og fontredigeringsprogrammer, men det er ikke det samme som et bilde av teksten din.

eller slipp TTF, OTF, WOFF …-filer her ·

Maks 95 MB per fil· Opptil 20 filer· Slettes etter 30 minutter

Utdata

Konverter til

Filene behandles på serverne våre og slettes etter 30 minutter.

Slik bruker du dette verktøyet

1
Last opp TTF-filen
Legg til én eller flere .ttf-filer, opptil 20 per omgang og 95 MB per fil. Både ikonfonter og tekstfonter fungerer.
2
Behold SVG-font som utdataformat
Konverter til er satt til SVG-font. Hinting gjelder ikke for SVG, så alternativet forsvinner. Familienavn under Avanserte innstillinger kan likevel gi fonten nytt navn.
3
Konverter til SVG
Trykk Konverter til SVG og last ned .svg-filen. Åpne den i et tekstredigeringsprogram, Inkscape eller FontForge for å komme til glyfbanene.

SVG-font kontra SVG-bilde av tekst

Søker du etter TTF til SVG, finner du to ulike mål blandet sammen. Det ene er en SVG-font: fontformatet definert i W3Cs SVG 1.0-anbefaling fra 2001, der et <font>-element inneholder en <glyph> per tegn med Unicode-verdi, avansebredde og konturen som en bane. Det andre er et SVG-bilde av en tekst, bokstavene i en logo eller et navn som allerede er satt på en linje og lagret som former. Denne konverteren lager den første typen. Har du et logobilde i stedet for en font, sporer PNG til SVG det til baner.

Å konvertere en TrueType-kontur til SVG-banedata mister ingenting i formen. SVG-baner støtter de samme kvadratiske kurvene som TrueType bruker, så hver kontur skrives slik den er. Det som ikke overlever, er alt rundt konturene: hinting-instruksjoner, OpenType-funksjoner utover enkel kerning og de binære tabellene operativsystemer trenger for å installere en font. En SVG-font kan ikke installeres på Windows eller macOS.

Slik ser en SVG-fontfil ut

Forkortet eksempel på markeringen i en SVG-font

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

Dette lager denne siden: én fil, én <glyph> per tegn, i fontenheter med y-aksen oppover.

Åpnes i FontForge, Inkscape og ikonfontverktøy
Kan ikke installeres på en datamaskin
Lastes ikke av dagens Chrome, Edge eller Firefox

En vanlig OTF eller TTF med en ekstra SVG-tabell som inneholder fargede glyfer i lag.

Installeres som alle andre fonter
Brukes til emoji og flerfarget skrift
Støtten varierer mellom apper og nettlesere

Hvor SVG-fonter kom fra, og hvor de ble av

SVG 1.0 definerer font-elementet: 2001
siste iPhone-Safari som trengte SVG-webfonter: iOS 4.1
fjerner SVG-fonter i 2014: Chrome 38
fjerner font-kapittelet: SVG 2

TTF

TrueType-skrift

TTF er skriftformatet TrueType, utviklet av Apple på slutten av 1980-tallet og lansert i 1991, deretter lisensiert til Microsoft. Det definerer glyfkonturer med kvadratiske kurver og har hinting-instruksjoner som gjør at tekst ser skarp ut på skjerm. TrueType støttes av alle skrivebordsoperativsystemer, tekstbehandlere og designprogrammer. Det mangler noen av de avanserte typografiske funksjonene i OpenType og er større enn nettskriftformatene.

Komprimering: Tapsfri
Gjennomsiktighet: –
Animasjon: –
Introdusert: 1991 · Apple

TTF-konverterer

SVG

Scalable Vector Graphics

SVG er et XML-basert vektorformat standardisert av W3C i 2001. I stedet for piksler beskriver det former, baner og tekst, så det forblir skarpt i alle størrelser og er vanligvis bitteliten for logoer og ikoner. Det støtter gjennomsiktighet, CSS-stiler, skripting og animasjon, og alle nettlesere gjengir det direkte. SVG egner seg ikke for fotografier, og komplekse illustrasjoner kan bli trege å gjengi. Illustrator, Inkscape, Figma og nettlesere kan åpne og redigere det.

Komprimering: –
Gjennomsiktighet: Ja
Animasjon: Ja
Introdusert: 2001 · W3C

SVG-konverterer

TTF til SVG skriver hver glyfs kontur som redigerbare SVG-banedata inne i en SVG-font, som brukes av ikonfontverktøy, fonteditorer og gamle webfont-pakker. Det er ikke en måte å laste fonter på moderne nettsider.

Vanlige spørsmål om TTF til SVG

Kan jeg bruke en SVG-font i CSS @font-face i dag?

Ikke i de fleste nettlesere. Chrome fjernet støtten for SVG-fonter i versjon 38 i 2014, og Firefox og Internet Explorer har aldri støttet dem. Til en nettside bør du heller konvertere TTF-filen med TTF til WOFF2.

Hvorfor står glyfene opp ned når jeg limer dem inn i en tegning?

SVG-fonter bruker fontens eget koordinatsystem, der y-aksen peker oppover fra grunnlinjen, mens vanlige SVG-tegninger teller y nedover fra toppen. Speil banen vertikalt, for eksempel med transformasjonen scale(1,-1), så vises den riktig.

Hvordan gjør jeg tekst om til SVG-baner for Cricut eller en laserkutter?

Installer TTF-filen, skriv ordene dine i Inkscape eller Illustrator og konverter teksten til konturer: Bane › Objekt til bane i Inkscape, Tekst › Lag konturer i Illustrator. Lagre det som SVG. En SVG-font inneholder hver bokstav for seg og er ikke satt opp som ord.

Beholder SVG-fonter kerning og ligaturer?

Bare delvis. SVG-fontformatet kan lagre kerningpar med hkern-elementer og glyfer med flere tegn, men har ingen tilsvarende OpenType-funksjonstabeller som kapitéler, alternativer eller kontekstregler. Behold TTF-filen hvis du trenger dem.

Er SVG-font nyttig for ikonfonter?

Ja, det er hovedbruken i dag. Verktøy for ikonfonter som IcoMoon importerer SVG-fonter, slik at du kan hente ikoner ut av en gammel ikonfont, redigere dem og lage et nytt sett eller eksportere hvert ikon som egen SVG.