UltKit

Convertire TTF in SVG

Questa pagina trasforma un font TrueType in un font SVG: un unico file XML in cui ogni carattere è un elemento <glyph> con il contorno scritto come dati di tracciato SVG. È utile per gli strumenti di icon font e per gli editor di font, ma non equivale a un'immagine del testo.

Convertitore di font

oppure trascina qui File TTF, OTF, WOFF … ·

Max 95 MB per file· Fino a 20 file· Eliminati dopo 30 minuti

Output

I file vengono elaborati sui nostri server ed eliminati dopo 30 minuti.

Come usare questo strumento

  1. 1

    Caricare il file TTF

    Aggiungi uno o più file .ttf, fino a 20 per lotto e 95 MB ciascuno. Funzionano sia i font di icone sia i font di testo.

  2. 2

    Lasciare font SVG come formato di uscita

    Converti in è impostato su SVG font. L'hinting non si applica all'output SVG, quindi l'opzione scompare; Nome della famiglia in Impostazioni avanzate permette comunque di rinominare il font.

  3. 3

    Convertire in SVG

    Premi Converti in SVG e scarica il file .svg. Aprilo in un editor di testo, in Inkscape o in FontForge per accedere ai tracciati dei glifi.

Font SVG o immagine SVG del testo

Cercando TTF in SVG si trovano due obiettivi diversi mescolati. Uno è un font SVG: il formato di font definito nella Raccomandazione SVG 1.0 del W3C del 2001, in cui un elemento <font> contiene un <glyph> per carattere con un valore Unicode, una larghezza di avanzamento e il contorno come tracciato. L'altro è un'immagine SVG di un testo, le lettere di un logo o di un nome già composto in una riga e salvato come forme. Questo convertitore produce il primo tipo. Se invece hai l'immagine di un logo e non un font, PNG in SVG la vettorializza in tracciati.

Convertire un contorno TrueType in dati di tracciato SVG non fa perdere nulla della forma. I tracciati SVG supportano le stesse curve quadratiche usate da TrueType, quindi ogni contorno viene scritto così com'è. Non sopravvive invece tutto ciò che sta attorno ai contorni: le istruzioni di hinting, le funzionalità OpenType oltre la semplice crenatura e le tabelle binarie di cui i sistemi operativi hanno bisogno per installare un font. Un font SVG non può essere installato su Windows o macOS.

Com'è fatto un file di font SVG

Esempio abbreviato del markup di un font SVG
<svg xmlns="http://www.w3.org/2000/svg">
  <!-- font SVG con un solo glifo -->
  <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>

Ciò che crea questa pagina: un file, un <glyph> per carattere, in unità del font con l'asse y rivolto verso l'alto.

  • Si apre in FontForge, Inkscape e negli strumenti per icon font
  • Non installabile su un computer
  • Non caricato dagli attuali Chrome, Edge o Firefox

Da dove vengono i font SVG e che fine hanno fatto

SVG 1.0 definisce l'elemento font
2001
ultimo Safari per iPhone che richiedeva i web font SVG
iOS 4.1
rimuove i font SVG nel 2014
Chrome 38
elimina il capitolo sui font
SVG 2

TTF

Font TrueType

TTF è il formato di font TrueType sviluppato da Apple alla fine degli anni Ottanta e rilasciato nel 1991, poi concesso in licenza a Microsoft. Definisce i contorni dei glifi con curve quadratiche e include istruzioni di hinting che rendono il testo nitido sugli schermi. TrueType è supportato da ogni sistema operativo desktop, elaboratore di testi e app di grafica. Mancano alcune funzioni tipografiche avanzate di OpenType e i file sono più grandi rispetto ai formati per font web.

Compressione
Senza perdita
Trasparenza
–
Animazione
–
Introdotto
1991 · Apple
Convertitore TTF

SVG

Scalable Vector Graphics

SVG è un formato vettoriale basato su XML standardizzato dal W3C nel 2001. Invece dei pixel descrive forme, tracciati e testo, quindi resta nitido a qualsiasi dimensione ed è di solito minuscolo per loghi e icone. Supporta trasparenza, stili CSS, script e animazioni, e ogni browser lo visualizza in modo nativo. SVG non è adatto alle fotografie, e le illustrazioni complesse possono diventare lente da visualizzare. Illustrator, Inkscape, Figma e i browser possono aprirlo e modificarlo.

Compressione
–
Trasparenza
Sì
Animazione
Sì
Introdotto
2001 · W3C
Convertitore SVG

TTF in SVG scrive il contorno di ogni glifo come dati di tracciato SVG modificabili all'interno di un font SVG, usato da strumenti per icon font, editor di font e vecchi kit webfont; non serve a caricare font nelle pagine web moderne.

Domande frequenti su TTF in SVG

Si può usare oggi un font SVG in CSS @font-face?

Non nella maggior parte dei browser. Chrome ha rimosso il supporto ai font SVG nella versione 38 nel 2014, mentre Firefox e Internet Explorer non lo hanno mai aggiunto. Per un sito web, converti invece il TTF con TTF in WOFF2.

Perché i glifi risultano capovolti quando li incollo in un disegno?

I font SVG usano il sistema di coordinate del font, in cui l'asse y punta verso l'alto a partire dalla linea di base, mentre i normali disegni SVG contano y verso il basso dall'alto. Capovolgi il tracciato in verticale, ad esempio con una trasformazione scale(1,-1), e verrà letto correttamente.

Come si trasforma il testo in tracciati SVG per Cricut o per una macchina di taglio laser?

Installa il TTF, scrivi il testo in Inkscape o Illustrator e converti il testo in contorni: Percorso › Da oggetto a tracciato in Inkscape, Tipo › Crea contorni in Illustrator. Poi salva come SVG. Un font SVG contiene ogni lettera separatamente e non è impaginato in parole.

I font SVG conservano crenatura e legature?

Solo in parte. Il formato font SVG può memorizzare le coppie di crenatura con gli elementi hkern e glifi di più caratteri, ma non ha un equivalente delle tabelle di funzionalità OpenType come maiuscoletto, alternative o regole contestuali. Conserva il TTF se ti servono.

Il font SVG è utile per creare icon font?

Sì, oggi è il suo uso principale. Strumenti per icon font come IcoMoon importano i font SVG, quindi puoi estrarre le icone da un vecchio icon font, modificarle e creare un nuovo set oppure esportare ogni icona come SVG a sé.