PerfectVector
Di Irene Kim9 min di lettura

SVG in FontForge: dai disegni ai contorni dei glifi

Importa grafica SVG in uno slot glifo di FontForge, poi verifica contorni, linea di base, scala e spaziatura. Scopri cosa offre il ricalco e cosa resta da progettare.

In questa pagina

Per importare un SVG in FontForge, apri lo slot del glifo previsto, scegli File → Import, cambia il formato in SVG e seleziona il file. Il risultato è una geometria di contorni nella finestra di modifica di quel glifo. Devi ancora controllarne posizione, dimensioni, contorni e spaziatura prima di generare un font utilizzabile.

Questa distinzione conta quando la sorgente è un disegno. Il ricalco può ricostruire forme dai pixel. Non può determinare linea di base, larghezza di avanzamento o ritmo della spaziatura di un carattere tipografico. Parti da un glifo e completa questi controlli prima di importare un alfabeto.

Importa in uno slot glifo, non soltanto in una finestra di font aperta

Crea un nuovo documento FontForge o apri il font di lavoro, poi fai doppio clic sullo slot del carattere che intendi modificare. Importa l'SVG da File → Import dentro quella finestra dei contorni. Se il selettore elenca inizialmente formati bitmap, passa il filtro del formato a SVG. È la sequenza del tutorial FontForge sull'importazione dei contorni.

Controlla prima la destinazione. Se stai aggiungendo una g minuscola originale, conferma di modificare lo slot g previsto. Un file chiamato g.svg non sostituisce il controllo del glifo e della sua mappatura. Salva una copia di un font esistente prima di sostituire qualsiasi contorno.

Dopo l'importazione, seleziona un punto e conferma di avere contorni modificabili. Se hai soltanto un'immagine che serve da riferimento per il ricalco, non hai raggiunto lo stesso risultato. La documentazione del menu File di FontForge distingue importazioni di immagini, contorni dei glifi e operazioni sui file di caratteri.

Per questa guida, l'obiettivo è un normale glifo a contorni. I flussi specializzati per caratteri multilivello o a colori hanno requisiti aggiuntivi; un'illustrazione pronta per il browser non diventa automaticamente nemmeno quel tipo di carattere.

Usa i vettori originali quando li hai

Se hai disegnato il glifo in un editor vettoriale, prepara direttamente quella grafica. Conserva i contorni originali, crea una copia separata per l'importazione e semplifica lì le funzionalità di presentazione non supportate. Ricalcare di nuovo un'immagine di vettori esistenti può cambiare forme che controlli già.

Se la sorgente è un disegno raster o un simbolo generato, converti l'immagine in tracciati vettoriali con PerfectVector e controlla l'SVG. Ottieni così un contorno iniziale da modificare. FontForge resta il luogo in cui costruire metriche, spaziatura e comportamento del carattere.

Per un progetto disegnato a mano, scegli una sorgente chiara e ad alto contrasto. Ritaglia via caratteri vicini ed elementi superflui della carta, ma conserva l'intera ascendente o discendente. La guida alla vettorializzazione del lettering a mano tratta la preparazione della sorgente; la spiegazione della vettorializzazione delle immagini descrive cosa produce effettivamente la conversione.

Una lettera ricalcata resta geometria grafica

Abbiamo preparato una g minuscola raster originale con un'ampia controforma e una discendente netta, poi l'abbiamo convertita tramite PerfectVector. L'SVG grezzo conteneva tre tracciati chiusi: uno sfondo della tela quasi bianco, una sagoma nera della lettera e una forma quasi bianca per la controforma. Non aveva immagini incorporate.

La controforma bianca era disegnata sopra la sagoma nera. Non era già un contorno interno di un glifo tipografico finito. Rimuovere soltanto la forma bianca esporrebbe il nero pieno sottostante. Nella copia per l'importazione, rimuovi lo sfondo verificato e prepara la controforma come apertura reale prima di valutare il riempimento del glifo.

G minuscola raster preparata accanto all'output SVG effettivo con tre tracciati chiusi e una controforma bianca disegnata, con contorni blu dei tracciati SVG
Glifo raster originale preparato e output SVG effettivo di PerfectVector. Il file grezzo ha tre tracciati, inclusi sfondo e controforma disegnata. Non sono mostrati un'importazione FontForge o un font finito. Linee blu sono sovrapposte ai tracciati SVG effettivi per esaminarli; i contorni dello sfondo sono omessi.

Il confronto mostra le prove dei contorni esaminati, non un test FontForge. Non abbiamo assegnato linea di base, dimensione em, larghezza di avanzamento o crenatura a questo output. Una discendente dall'aspetto pulito dice dove si estende il disegno; non stabilisce dove debba trovarsi la linea di base del font.

Prepara contorni espliciti prima di regolare le metriche

Conserva un SVG intatto e una copia di lavoro separata. Nella copia di lavoro, rimuovi forme di sfondo non correlate, espandi i tratti quando il loro spessore visibile definisce il glifo e risolvi maschere o effetti ritagliati nelle forme che intendi mantenere. FontForge importa un sottoinsieme di SVG, come spiega il suo riferimento sull'importazione.

Per una lettera con controforma, controlla sia il bordo esterno sia quello interno. Devono descrivere la regione riempita prevista. Una sovrapposizione bianca può imitare l'aspetto su una pagina bianca senza dare al carattere la struttura dei contorni corretta.

Dopo aver importato la grafica preparata, cerca estremi aperti, sovrapposizioni accidentali e autointersezioni. Element → Correct Direction imposta direzioni alternate per contorni esterni e annidati, ma può produrre risultati inattesi quando le spline si incrociano. Risolvi questi incroci prima di fidarti del comando. FontForge documenta questo limite nel suo riferimento al menu Element.

Evita di semplificare soltanto in base a un numero di nodi desiderato. Preserva angoli, terminali e curve che definiscono il disegno. La guida ai nodi SVG eccessivi può aiutare a diagnosticare contorni irregolari, ma un contorno tipografico richiede anche un giudizio tipografico alle dimensioni di lettura.

Allinea la linea di base prima di giudicare l'altezza

La grafica importata può arrivare troppo piccola, troppo grande o spostata rispetto all'origine prevista. Seleziona tutti i punti del glifo e spostali o ridimensionali insieme. Il tutorial di importazione di FontForge descrive il posizionamento del contorno e l'uso di Element → Transform → Transform con ridimensionamento uniforme.

Per la g minuscola, non allineare il punto più basso alla linea di base: quel punto appartiene alla discendente. Posiziona il corpo della lettera rispetto alla linea di base e all'altezza della x previste, lasciando la discendente sotto. Confronta con glifi minuscoli vicini nello stesso progetto se esistono già.

Usa un sistema di coordinate sorgente coerente quando prepari altre lettere. Il tutorial FontForge propone un flusso a 1.000 unità, mentre la guida all'importazione di Design With FontForge spiega come le coordinate verticali di un SVG si rapportino ad ascendente e discendente. Trattale come istruzioni coordinate di configurazione, non come regola per cui ogni SVG esistente debba essere allungato in un quadrato.

Un font con unità per em diverse richiede un piano corrispondente. Allo stesso modo, ritagliare strettamente ogni lettera su una pagina SVG di altezza diversa può eliminare il riferimento condiviso necessario per un posizionamento coerente. Stabilisci quel riferimento con uno o due glifi prima di elaborare gli altri.

Imposta la spaziatura nel contesto

La larghezza visibile della lettera e la sua larghezza di avanzamento sono diverse. L'avanzamento dice al carattere successivo dove iniziare; lo spazio vuoto attorno al contorno contribuisce al ritmo di una parola.

Apri la finestra Metrics dal menu Window e controlla il glifo accanto ad altre lettere. Il tutorial sulle metriche di FontForge descrive la modifica dello spazio laterale sinistro spostando il contorno e dello spazio laterale destro tramite la linea della larghezza di avanzamento.

Per una prima g, confronta lettere ripetute e brevi combinazioni con glifi già disegnati, come gg, ng e go. Guarda gli spazi oltre ai contorni. Non usare la crenatura per compensare ogni spazio laterale predefinito scelto male; stabilisci prima una spaziatura ragionevole per i vicini ordinari, poi affronta le coppie eccezionali.

Un glifo che sembra centrato su una pagina SVG può comunque risultare mal posizionato nel testo. Viceversa, uno spazio numericamente uguale sui due lati non è sempre quello che appare corretto. Mantieni i limiti SVG come riferimento geometrico e giudica il carattere in una riga di testo.

Valida e genera un carattere di prova

Salva il progetto FontForge modificabile prima di generare un file di carattere. Save conserva la sorgente di lavoro; Generate Fonts crea un formato di carattere come TrueType o OpenType. Il tutorial su controllo e generazione spiega questa distinzione.

Esegui Element → Find Problems sui glifi preparati. Esamina i problemi segnalati invece di accettare automaticamente ogni modifica suggerita: FontForge osserva che alcuni risultati possono riflettere scelte progettuali intenzionali. Poi controlla di nuovo visivamente i glifi.

Genera un carattere di prova e usalo nell'applicazione prevista. Controlla mappatura dei caratteri, controforma, linea di base, spazio per la discendente e spaziatura sia a dimensioni piccole sia grandi. Se il carattere è ancora un piccolo prototipo, mantieni chiaro l'ambito del test. Importare un contorno riuscito non dimostra che un intero carattere tipografico sia finito.

FAQ

Perché il mio SVG ha dimensioni o posizione sbagliate in FontForge? Le coordinate sorgente e le dimensioni della pagina possono non corrispondere alla configurazione dell'em e della linea di base del carattere. Sposta e ridimensiona coerentemente il contorno importato, poi stabilisci un piano di coordinate condiviso prima di preparare altri glifi.

PerfectVector può trasformare un disegno in un carattere completo? PerfectVector converte grafica raster in tracciati vettoriali. Serve ancora un editor di caratteri per preparare contorni dei glifi, mappatura, metriche, spaziatura e file del carattere generato.

Perché la controforma della lettera si riempie? Controlla se l'apertura apparente è una sovrapposizione bianca, se è presente il contorno interno e se direzioni dei contorni o incroci richiedono riparazione. Esamina il riempimento del glifo preparato invece di affidarti all'aspetto dell'SVG originale su una pagina bianca.

Dovrei importare tutte le lettere SVG insieme? Completa prima un glifo rappresentativo. Conferma scala, linea di base, contorni e spaziatura, poi applica un metodo di preparazione coerente alle lettere rimanenti. L'importazione in batch non può decidere quei valori progettuali al posto tuo.

Fonti

  1. Tutorial FontForge sull'importazione dei contorni — Importazione nello slot glifo, posizionamento, ridimensionamento uniforme e dimensioni sorgente coordinate.
  2. Menu File di FontForge — Tipi di importazione, supporto SVG e operazioni su sorgente rispetto a file di caratteri.
  3. Menu Element di FontForge — Correzione della direzione dei contorni e limiti in presenza di incroci.
  4. Design With FontForge: importare glifi — Coordinate SVG e configurazione di ascendente e discendente.
  5. Tutorial FontForge sulle metriche — Spazi laterali, larghezza di avanzamento, spaziatura nel contesto e crenatura.
  6. Tutorial FontForge su controllo e generazione — Esame dei problemi e generazione di un formato di carattere utilizzabile.

Se il primo glifo esiste soltanto come pixel, converti il disegno in vettori modificabili, controlla controforma e contorno esterno, poi completa quel glifo in FontForge. Un contorno posizionato, spaziato e verificato correttamente è un punto di partenza utile per il resto del carattere.

Altro dal blog

Riparti da un SVG più pulito
e facile da modificare