Font SVG in resvg: carica il carattere giusto

Per renderizzare i font SVG in modo affidabile con resvg, fornisci i file di font al renderer e usa i loro nomi di famiglia nell'SVG. Per il binding Node nativo, @resvg/resvg-js, significa configurare fontFiles; imposta loadSystemFonts: false quando vuoi verificare esattamente quali font riceve il tuo processo. L'esempio Node del progetto mostra questa configurazione.

Un PNG può sembrare completo pur usando il carattere sbagliato. Controlla le forme delle lettere anche quando il comando di esportazione riesce.

Tre input di font, un SVG

Abbiamo creato un piccolo emblema di montagna con tracciati e posizionato accanto il testo modificabile PINE & FIELD. L'SVG richiede la famiglia Abel con peso normale. Abbiamo renderizzato la stessa sorgente tre volte con @resvg/resvg-js 2.6.2, Node 22.19.0 e macOS arm64. Il rilevamento dei font di sistema era disabilitato in ogni caso.

Test controllato di caricamento dei font

Queste osservazioni descrivono questo campione e questa configurazione. Non stabiliscono quale ripiego sceglierà un'altra raccolta di font, un altro binding o un'altra versione. La diagnosi utile è più semplice: una famiglia richiesta mancante può produrre testo assente o testo sostitutivo apparentemente plausibile.

Carica un font locale in resvg-js

Questo esempio usa il pacchetto Node nativo, non il pacchetto WebAssembly separato. Le definizioni di tipo della versione del binding elencano fontFiles, fontDirs e loadSystemFonts nell'opzione font.

In una nuova cartella di lavoro, installa la versione usata qui:

npm install --save-exact @resvg/resvg-js@2.6.2

Scarica Abel-Regular.ttf e il relativo OFL.txt dalla directory Abel di Google Fonts. Mantienili entrambi in una sottocartella fonts. Abel è fornito con la SIL Open Font License; conserva la licenza insieme al font quando distribuisci questo esempio.

Salva questo come label.svg:

<svg xmlns="http://www.w3.org/2000/svg"
     width="880" height="240" viewBox="0 0 880 240">
  <rect width="880" height="240" fill="#f6f2e8"/>
  <path d="M46 155 L96 57 L147 155 Z" fill="#176b5b"/>
  <path d="M75 155 L112 88 L166 155 Z" fill="#81ab78"/>
  <text x="195" y="151" font-family="Abel"
        font-size="82" font-weight="400" fill="#152e29">
    PINE &amp; FIELD
  </text>
</svg>

Poi salva render.mjs accanto all'SVG:

import { access, readFile, writeFile } from 'node:fs/promises';
import { fileURLToPath } from 'node:url';
import { Resvg } from '@resvg/resvg-js';
 
const fontFile = fileURLToPath(
  new URL('./fonts/Abel-Regular.ttf', import.meta.url)
);
await access(fontFile);
 
const svg = await readFile(new URL('./label.svg', import.meta.url));
const renderer = new Resvg(svg, {
  font: {
    loadSystemFonts: false,
    fontFiles: [fontFile],
  },
});
 
const png = renderer.render().asPng();
await writeFile(new URL('./label.png', import.meta.url), png);

Esegui node render.mjs. Gli URL di file rendono i percorsi di input e output relativi allo script, quindi cambiare la directory di lavoro del terminale non cambia il font che viene aperto. access() fornisce un errore diretto del filesystem se il font è assente o inaccessibile; non convalida il contenuto del font.

Per riprodurre i controlli, lascia invariato l'SVG. Usa un array fontFiles vuoto per la prima riga. Per la seconda, scarica Anton-Regular.ttf dalla directory Anton di Google Fonts, conserva la licenza e fornisci quel file anziché Abel. Esamina ogni PNG prima di cambiare altro.

Abbina il nome della famiglia, non il nome del file

Abel-Regular.ttf è un percorso di file. Abel è la famiglia richiesta dall'SVG. Scrivere font-family="Abel-Regular.ttf" non dice al renderer di aprire quel file.

L'attributo SVG font-family accetta nomi di famiglia o famiglie generiche, con un elenco in ordine di priorità quando ne fornisci diversi. Ha anche un corrispettivo CSS: una dichiarazione CSS font-family corrispondente ha precedenza sull'attributo di presentazione.

Per la tua grafica, controlla insieme tre cose:

• Famiglia: il nome registrato nel font e richiesto dall'SVG.
• Stile e peso: se il carattere fornito corrisponde alle scritte desiderate.
• Caratteri: se il font contiene le lettere e i simboli dell'etichetta effettiva.

Un readFile riuscito dimostra soltanto che sono stati letti dei byte. Una parola visibile dimostra soltanto che sono state renderizzate delle lettere. Nessuno dei due dimostra che il carattere selezionato sia quello del tuo disegno.

Per una diagnosi più ampia del testo modificabile rispetto ai contorni, consulta perché i font SVG cambiano dopo l'esportazione.

Controlla gli stessi input nell'ambiente di esportazione

Tratta il font come un input del processo grafico. Includi il file di font necessario nel deployment o nel pacchetto del processo, poi conferma che il percorso risolto punti al file in quell'ambiente. È facile dimenticare un carattere installato sul portatile di design quando si prepara un processo server.

Parti con il rilevamento di sistema disabilitato e il più piccolo elenco esplicito di font che copra l'etichetta di prova. Quando l'output è corretto, prova le parole, la punteggiatura, i pesi e le lingue effettive usate dalla grafica. La nostra etichetta latina di peso normale non prova altri sistemi di scrittura o famiglie di font complesse.

Se le scritte appaiono ancora errate, esamina la sorgente per individuare sovrascritture CSS e stili <tspan> annidati. Se emblema ed etichetta sono entrambi ritagliati o scalati in modo inatteso, esamina separatamente i limiti SVG e le dimensioni raster. La nostra guida al dimensionamento in CairoSVG tratta questa distinzione in un altro renderer; le sue opzioni sono specifiche di CairoSVG.

Quando condividi una segnalazione di bug o un processo di esportazione riproducibile, includi SVG, versione esatta del binding, nomi e versioni dei file di font, opzioni del renderer e un'immagine attesa. Tieni conto dei permessi di ridistribuzione dei font quando confezioni i file.

Conserva la sorgente modificabile accanto al PNG

Il codice sopra scrive un PNG. È un file raster di consegna; le sue lettere visibili non sono più testo SVG modificabile. Conserva label.svg e gli input dei font come sorgente per future modifiche al testo.

Se un destinatario richiede un logo vettoriale con scritte fisse, prepara nel tuo editor vettoriale una copia SVG separata con testo convertito in contorni ed esaminala lì. Mantieni l'originale con testo modificabile. La nostra guida ai formati dei file di logo spiega quali file sorgente e di consegna servono a compiti diversi.

Se l'emblema che ti serve esiste soltanto in un PNG o JPG, il vettorializzatore di loghi di PerfectVector può aiutare a recuperare la grafica vettoriale per quella parte del disegno. Esamina i tracciati risultanti, rimuovi eventuali scritte ricalcate indesiderate e riscrivi l'etichetta con un font noto prima di eseguire l'esportazione resvg. La vettorializzazione non identifica il font originale né ripristina il testo modificabile. La guida alla vettorializzazione delle immagini spiega cosa cambia quella conversione.

FAQ

Perché il testo scompare quando disabilito i font di sistema? Nel nostro test senza font, il renderer non aveva alcun carattere fornito per l'etichetta modificabile, quindi è apparsa soltanto la grafica a tracciati. Carica esplicitamente un font adatto e controlla famiglia, stile e copertura dei caratteri.

Posso usare il nome del file di font come nome della famiglia SVG? Usa il nome della famiglia del font nell'SVG. Passa separatamente il nome del file locale attraverso fontFiles. Rinominare un file di font non cambia il suo nome interno di famiglia.

resvg trasforma il mio logo PNG in un SVG modificabile? L'esempio qui renderizza SVG in PNG. Non vettorializza un logo raster. Recupera l'emblema con un flusso di vettorializzazione se necessario, poi aggiungi testo modificabile e mantieni quell'SVG come originale.

Fonti

1. resvg-js — README della versione 2.6.2 — Uso nativo in Node e caricamento esplicito dei font.
2. resvg-js — Definizioni di tipo della versione 2.6.2 — Configurazione dei font e API delle immagini renderizzate.
3. MDN — SVG font-family — Elenchi di famiglie e precedenza CSS.
4. Google Fonts — Abel — Il carattere normale e la licenza usati per l'etichetta prevista.
5. Google Fonts — Anton — Il font e la licenza usati per il controllo della sostituzione.

Se un emblema raster blocca il lavoro grafico, vettorializza la grafica del logo, controllane i bordi nell'editor e aggiungi l'etichetta come testo modificabile. Poi renderizza con un file di font esplicito e confronta il PNG con l'originale prima della consegna.