Perché il font SVG cambia dopo esportazione o importazione

Il font dell'SVG cambia perché il testo modificabile normalmente indica il nome di un font; non contiene automaticamente le forme delle lettere nel file. Se il browser, l'editor, il programma da taglio o il computer del destinatario non può usare quel font, sceglie un sostituto. Le diverse larghezze dei glifi cambiano quindi interruzioni di riga, allineamento e posizione della grafica vicina.

Esistono due strategie di consegna affidabili. Conserva il testo modificabile quando la destinazione richiede parole selezionabili, ricercabili o modificabili e puoi fornire correttamente il font. Converti il testo in contorni vettoriali quando l'aspetto deve restare fisso e non serve più cambiare le parole. In entrambi i casi, conserva un master modificabile separato.

Per un'esportazione PNG automatizzata, carica esplicitamente i file dei font in resvg e confronta le lettere renderizzate con la fonte prima della consegna.

Per le figure nei documenti, confronta illustrazioni SVG ed etichette composte in LaTeX. Separare la geometria del disegno dal testo delle etichette permette al documento di comporre le parole mentre conservi il master SVG.

Prima verifica se l'SVG contiene ancora testo

L'estensione del file non basta. L'SVG può rappresentare le scritte almeno in due modi comuni:

<text font-family="Example Sans" font-weight="600">Sample</text>

Questo è testo modificabile. L'SVG conserva caratteri e istruzioni di stile. Il renderer deve trovare un font corrispondente per trasformarli in glifi visibili.

Il testo convertito in contorni appare più o meno così:

<path d="M ... Z" />

Qui ogni lettera è stata convertita in geometria vettoriale. Il destinatario non ha bisogno del font, ma la parola non è più una normale stringa di testo modificabile.

Puoi controllare senza comprendere tutto il markup:

1. crea una copia dell'SVG;
2. aprila in un editor di testo semplice;
3. cerca <text e <tspan;
4. cerca il nome visibile del font;
5. se non li trovi, controlla se le lettere sono costruite con elementi <path>.

Nell'editor vettoriale, usa lo strumento testo e fai clic su una lettera. Un cursore lampeggiante indica testo modificabile. Nodi intorno a ogni glifo indicano contorni.

Tre stati della tipografia

Causa 1: il font previsto non è installato

L'attributo SVG font-family è un elenco ordinato per priorità di nomi di famiglie. Come spiega il riferimento MDN a font-family in SVG, il renderer sceglie da quell'elenco. Se non trova la prima famiglia, passa alla successiva e infine a una generica, come sans-serif o serif.

Succede spesso quando:

• il designer ha usato un font locale che il destinatario non possiede;
• un font è stato attivato tramite un servizio in abbonamento su una sola macchina;
• l'SVG passa da un editor desktop a telefono, tablet, app da taglio o suite per ufficio;
• il nome della famiglia dentro il font differisce dal nome del file o da quello mostrato nella cartella scaricata;
• è installato un solo stile, mentre l'SVG richiede un altro peso o una variante corsiva.

Installare «qualcosa di simile» non ripristina la disposizione. Due font sans-serif possono avere diverse larghezze delle lettere, ascendenti, crenatura e metriche della linea di base. Il sostituto può sembrare vicino e comunque spostare una parola centrata dalla posizione prevista. Una volta disponibile il font corretto, l'esempio di allineamento verticale del testo SVG aiuta a distinguere la posizione della linea di base dal riquadro di testo e dalla centratura visiva.

Causa 2: l'SVG richiede un font web che non si è caricato

Un SVG usato in una pagina web può ricevere font dal CSS della pagina. Può anche includere un blocco di stile con una regola @font-face; SVG 2 richiede il supporto ai font scaricabili attraverso il modello CSS Fonts. Questa configurazione fallisce se l'URL del font è errato, il file non è pubblicato, l'accesso è bloccato, il formato richiesto non è supportato o l'SVG viene aperto da solo invece che nella pagina che forniva gli stili.

Usa gli strumenti per sviluppatori del browser e ricarica la pagina. Nel pannello Network, filtra i file dei font e cerca una richiesta fallita. Negli stili calcolati dell'elemento <text>, verifica quale font è stato davvero renderizzato invece di fidarti del nome dichiarato.

Un SVG che funziona solo incorporato in un sito non è necessariamente un file di consegna autonomo. Prova l'SVG esportato direttamente in una finestra privata del browser e su un altro dispositivo. Questo rivela dipendenze nascoste da un servizio di font con accesso autenticato, un font in cache o un foglio di stile del sito.

Incorporare una risorsa font può rendere un SVG web più portabile, ma aumenta le dimensioni del file, può incontrare limiti di supporto nelle singole app e deve essere consentito dalla licenza. Controlla la licenza effettiva invece di presumere che una licenza desktop autorizzi a ridistribuire i dati del font.

Causa 3: famiglia o peso non corrispondono esattamente

La corrispondenza dei font CSS usa più del nome visibile della famiglia. L'SVG può richiedere:

font-family: "Example Sans";
font-style: normal;
font-weight: 600;

Se i file disponibili contengono solo i pesi 400 e 700, il renderer può sintetizzare un peso o scegliere una variante vicina. I font variabili aggiungono assi e nomi di istanze che un'app di importazione può interpretare diversamente. I programmi di grafica o taglio più vecchi possono ignorare alcune funzionalità OpenType, legature o impostazioni di variazione.

Confronta il documento originale e l'SVG affiancati:

• nome esatto della famiglia;
• stile e peso numerico;
• spaziatura delle lettere;
• maiuscole e caratteri effettivi;
• funzionalità OpenType come le legature;
• valori degli assi del font variabile;
• comportamento del testo su tracciato o verticale.

Non correggere una famiglia sbagliata ridimensionando manualmente ogni parola. Nasconderesti il sintomo mantenendo i glifi sbagliati.

Causa 4: il testo è conservato, ma l'app lo gestisce diversamente

La disposizione del testo SVG non è identica a un documento di impaginazione desktop. Un esportatore può usare elementi <tspan> annidati, coordinate singole, un text-anchor o un <textPath>. L'app che importa può appiattire, raggruppare di nuovo o reinterpretare queste funzionalità. Se ricostruisci un distintivo, la guida al testo SVG modificabile su tracciato separa emblema, curva guida e scritta modificabile per provare ogni parte.

Per l'inserimento nei documenti, segui il procedimento per figure SVG e grafica inline in Typst. Conservare le didascalie come testo nativo del documento permette di controllare le scritte dell'illustrazione separatamente dalla numerazione delle figure e dalla tipografia dei paragrafi.

La documentazione attuale Adobe sull'esportazione SVG precisa che il testo su tracciato può non mantenere la stessa resa visiva in tutti i visualizzatori SVG. Distingue anche l'output con testo modificabile da Convert To Outlines, che trasforma il testo in tracciati vettoriali per conservarne l'aspetto.

Se il font corretto è presente ma la posizione cambia ancora, controlla la struttura invece di cambiare carattere:

1. confronta il rendering del browser con l'editor sorgente;
2. verifica se ogni carattere ha una posizione x propria;
3. controlla le trasformazioni annidate sul gruppo di testo;
4. verifica se l'importatore ha rimosso text-anchor, crenatura o impostazioni della linea di base;
5. prova una copia con semplice testo orizzontale per isolare il comportamento del testo su tracciato.

Per un logo, un distintivo o un titolo su una riga in cui l'aspetto conta più della modificabilità, i contorni sono solitamente il formato di consegna più sicuro.

Causa 5: hai convertito in contorni aspettandoti testo modificabile

Il testo convertito in contorni non può subire sostituzioni del font perché non fa più riferimento a un font. Può comunque sorprendere all'importazione:

• le lettere possono arrivare come tracciati composti invece di una parola modificabile;
• gli spazi interni delle lettere possono riempirsi se rilasci un tracciato composto;
• molti glifi possono essere raggruppati;
• un'app di destinazione limitata può unire o semplificare i tracciati;
• il file può diventare più grande della versione con testo modificabile.

Questi sono cambiamenti di geometria e modificabilità, non di font. Se le forme corrispondono alla fonte, l'esportazione in contorni ha svolto il proprio compito.

Conserva sempre due file:

• Master modificabile: testo modificabile, informazioni originali sul font, livelli nominati e formato dell'app sorgente.
• Copia di consegna: SVG, EPS o PDF con testo in contorni quando l'aspetto è fondamentale.

Non convertire mai in contorni l'unico master. Correggere una parola, tradurre o aggiungere uno slogan diventa un lento ridisegno manuale quando il testo è fatto di tracciati.

Quale soluzione usare?

La destinazione determina il compromesso. Il testo modificabile conserva significato e possibilità di modifica. I contorni conservano l'aspetto. Un solo file non può massimizzare entrambi senza dipendenze aggiuntive o dati sorgente.

Un procedimento sicuro per i contorni

Per una consegna in cui l'aspetto è fondamentale:

1. salva il documento sorgente con testo modificabile;
2. duplicalo e aggiungi -outlined o -delivery al nome;
3. seleziona il testo e usa Create Outlines, Convert to Curves, Object to Path o il comando equivalente;
4. controlla i fori delle lettere e le forme sovrapposte;
5. esporta in SVG;
6. apri l'SVG in un browser e in un secondo editor;
7. confrontalo con la fonte a dimensioni normali e ad alto ingrandimento;
8. invia il file in contorni e archivia il master con testo modificabile e le informazioni sulla licenza del font.

Non rasterizzare il testo solo per evitare un font mancante. Un PNG dentro l'SVG impedisce la sostituzione ma elimina la geometria scalabile dei tracciati. La conversione in contorni mantiene veri vettori.

Se del logo rimane soltanto un'immagine raster

A volte non sopravvive né il testo modificabile né un master in contorni. Potresti avere solo un piccolo PNG, JPG o una schermata del logo. La guida alle scelte per vettorizzare un logo spiega quando ricalcare il raster e quando ridisegnarlo. Installare font non può riparare un raster, e identificare un carattere simile potrebbe non riprodurre le modifiche personalizzate delle lettere.

Qui PerfectVector può aiutare in determinate condizioni: la vettorizzazione del logo può ricostruire le lettere raster visibili come forme vettoriali. Il risultato è grafica in contorni, non testo modificabile recuperato. Non identifica il font originale, non ripristina la crenatura e non rende le parole nuovamente digitabili. Usalo per recuperare la geometria visibile del logo, poi mantieni la ricostruzione separata da un eventuale nuovo master con testo composto.

Per una strategia di consegna più ampia, la guida ai formati dei file logo spiega quali formati master e di consegna conservare.

FAQ

Perché l'SVG usa un font diverso su un altro computer? Probabilmente contiene testo modificabile che indica un font non disponibile sull'altro computer. Il renderer sceglie un'altra famiglia dall'elenco dei sostituti, cambiando forme dei glifi, larghezza, spaziatura e a volte allineamento.

Un SVG incorpora automaticamente il font? No. Può indicare un font, riceverlo dal CSS della pagina o includere una risorsa font, ma il normale testo modificabile non include automaticamente il file del font desktop. Disponibilità, supporto del browser e licenza vanno comunque gestiti.

Devo convertire il testo SVG in contorni? Converti una copia di consegna quando l'aspetto deve restare fisso, soprattutto per loghi, scritte decorative, stampa e programmi per produzione manuale. Conserva il testo modificabile nel master modificabile quando contano parole, accessibilità, ricerca o localizzazione.

Perché il testo in contorni non è più modificabile dopo l'importazione? La conversione sostituisce i caratteri con tracciati vettoriali. Il destinatario può modificare nodi e forme, ma non inserire un cursore di testo o cambiare font. È previsto: conserva e condividi un master con testo modificabile se in futuro servirà cambiare le parole.

PerfectVector può recuperare il font originale da un logo raster? No. Può ricostruire le lettere raster visibili come contorni vettoriali, ma non identifica il font originale né ripristina caratteri modificabili, crenatura e impostazioni del font. Usalo quando l'obiettivo è recuperare la geometria visibile del logo.

Fonti

1. W3C — Testo SVG — Contenuti di testo modificabile <text> e <tspan>, proprietà dei font, disposizione e supporto dei font scaricabili.
2. W3C — CSS Fonts Module Level 3 — Corrispondenza delle famiglie, selezione delle varianti, famiglie mancanti e sostituzione di sistema.
3. MDN — SVG font-family — Elenchi prioritari di famiglie e sostituti generici in SVG.
4. Adobe Illustrator — Creare testo in contorni — Conversione del testo in tracciati e conseguente perdita della modificabilità testuale.
5. Adobe Illustrator — Salvare la grafica — Esportazione del testo SVG, contorni e avvertenze sulla compatibilità del testo su tracciato.

Quando un master mancante ti lascia solo un logo raster, ricostruiscine le lettere visibili come contorni vettoriali con PerfectVector, poi verifica le forme in un secondo editor. Se esiste ancora testo modificabile, correggi la dipendenza dal font o converti in contorni una copia di consegna invece di ricalcarlo di nuovo.