Polices SVG resvg : charge la bonne famille

Pour afficher les polices SVG de façon fiable avec resvg, fournis leurs fichiers au moteur de rendu et utilise leurs noms de famille dans le SVG. Avec la liaison Node native @resvg/resvg-js, cela consiste à configurer fontFiles ; définis loadSystemFonts: false pour tester précisément les polices reçues par ton traitement. L’exemple Node du projet illustre cette configuration.

Un PNG peut sembler complet tout en utilisant la mauvaise police. Vérifie la forme des lettres même si la commande d’export réussit.

Trois entrées de police, un seul SVG

Nous avons créé un petit emblème de montagne avec des tracés et placé le texte éditable PINE & FIELD à côté. Le SVG demande la famille Abel en graisse normale. Nous avons rendu la même source trois fois avec @resvg/resvg-js 2.6.2, Node 22.19.0 et macOS arm64. La découverte des polices système était désactivée dans tous les cas.

Test contrôlé de chargement des polices

Ces observations décrivent cet exemple et cette configuration. Elles ne déterminent pas quelle substitution choisira une autre collection de polices, liaison ou version. Le diagnostic utile est plus simple : une famille demandée absente peut produire du texte manquant ou un texte de remplacement d’apparence plausible.

Charge une police locale dans resvg-js

Cet exemple utilise le paquet Node natif, pas le paquet WebAssembly distinct. Les définitions de types versionnées de la liaison listent fontFiles, fontDirs et loadSystemFonts dans l’option font.

Dans un nouveau dossier de travail, installe la version utilisée ici :

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

Télécharge Abel-Regular.ttf et son fichier OFL.txt associé dans le répertoire Abel de Google Fonts. Conserve les deux dans un sous-dossier fonts. Abel est fourni sous licence SIL Open Font License ; garde la licence avec la police lorsque tu distribues cet exemple.

Enregistre ceci sous 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>

Puis enregistre render.mjs à côté du 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);

Exécute node render.mjs. Les URL de fichier rendent les chemins d’entrée et de sortie relatifs au script : changer le dossier de travail du terminal ne change donc pas la police ouverte. access() te donne une erreur de système de fichiers directe si la police est absente ou inaccessible ; il ne valide pas son contenu.

Pour reproduire les cas témoins, laisse le SVG inchangé. Utilise un tableau fontFiles vide pour la première ligne. Pour la deuxième, télécharge Anton-Regular.ttf dans le répertoire Anton de Google Fonts, conserve sa licence et fournis ce fichier à la place d’Abel. Examine chaque PNG avant de changer autre chose.

Fais correspondre le nom de famille, pas le nom du fichier

Abel-Regular.ttf est un chemin de fichier. Abel est la famille demandée par le SVG. Écrire font-family="Abel-Regular.ttf" ne dit pas au moteur de rendu d’ouvrir ce fichier.

L’attribut SVG font-family accepte des noms de famille ou des familles génériques, avec une liste de priorité si tu en fournis plusieurs. Il possède aussi un équivalent CSS : une déclaration CSS font-family correspondante prime sur l’attribut de présentation.

Pour ta propre illustration, vérifie trois points ensemble :

• Famille : le nom enregistré dans la police et demandé par le SVG.
• Style et graisse : la police fournie correspond-elle au lettrage souhaité ?
• Caractères : contient-elle les lettres et symboles du texte réel ?

Un readFile réussi prouve uniquement que des octets ont été lus. Un mot visible prouve uniquement qu’un lettrage a été affiché. Aucun des deux ne prouve que la police sélectionnée est celle de ton dessin.

Pour un diagnostic plus général du texte éditable face aux contours vectorisés, consulte pourquoi les polices SVG changent après exportation.

Vérifie les mêmes entrées dans ton environnement d’export

Traite la police comme une entrée du traitement de l’illustration. Inclus le fichier de police nécessaire dans ton déploiement ou parmi les fichiers nécessaires à ton traitement, puis confirme que le chemin résolu y pointe bien. Il est facile d’oublier une police installée sur ton ordinateur de design lors de la préparation d’un traitement serveur.

Commence avec la découverte système désactivée et la plus petite liste explicite de polices couvrant ton texte de test. Une fois cette sortie correcte, teste les vrais mots, la ponctuation, les graisses et les langues de ton illustration. Notre texte latin en graisse normale ne teste pas les autres écritures ni les familles complexes.

Si le lettrage semble encore incorrect, recherche dans la source des règles CSS qui prennent le dessus et des styles <tspan> imbriqués. Si l’emblème et le texte sont tous deux découpés ou redimensionnés de manière inattendue, examine séparément les limites SVG et les dimensions matricielles. Notre guide de dimensionnement CairoSVG explique cette distinction pour un autre moteur de rendu ; ses options sont propres à CairoSVG.

Pour partager un rapport de problème ou un traitement d’export reproductible, inclus le SVG, la version exacte de la liaison, les noms et versions des fichiers de police, les options du moteur de rendu et une image attendue. Tiens compte des autorisations de redistribution des polices lorsque tu regroupes les fichiers.

Garde la source modifiable à côté du PNG

Le code ci-dessus écrit un PNG. C’est un fichier de livraison matriciel ; ses lettres visibles ne sont plus du texte SVG modifiable. Conserve label.svg et les fichiers de police comme source des futures modifications de texte.

Si un destinataire a besoin d’un logo vectoriel au lettrage figé, prépare une copie de livraison SVG distincte avec le texte converti en tracés dans ton éditeur vectoriel et examine-la dans cet éditeur. Conserve l’original au texte éditable. Notre guide des formats de fichiers de logo explique les rôles différents des sources et des livrables.

Si l’emblème nécessaire existe uniquement en PNG ou JPG, le vectoriseur de logos PerfectVector peut aider à reconstruire l’illustration vectorielle de cette partie du dessin. Examine les tracés obtenus, retire tout lettrage vectorisé indésirable et ressaisis le texte avec une police connue avant l’export resvg. La vectorisation n’identifie pas la police d’origine et ne restaure pas le texte éditable. Le guide de la vectorisation d’images explique ce que cette conversion change.

FAQ

Pourquoi le texte disparaît-il lorsque je désactive les polices système ? Dans notre test sans polices, le moteur de rendu ne disposait d’aucune police fournie pour le texte éditable : seule l’illustration en tracés apparaissait. Charge explicitement une police adaptée et vérifie sa famille, son style et sa couverture de caractères.

Puis-je utiliser le nom du fichier de police comme nom de famille SVG ? Utilise le nom de famille de la police dans le SVG. Transmets séparément le nom du fichier local via fontFiles. Renommer un fichier de police ne change pas son nom de famille interne.

resvg transforme-t-il mon logo PNG en SVG modifiable ? L’exemple présenté convertit un SVG en PNG. Il ne vectorise pas un logo matriciel. Reconstruis l’emblème avec un processus de vectorisation si nécessaire, puis ajoute du texte modifiable et conserve ce SVG comme original.

Sources

1. resvg-js — README de la version 2.6.2 — Utilisation native dans Node et chargement explicite des polices.
2. resvg-js — définitions de types de la version 2.6.2 — Configuration des polices et API des images rendues.
3. MDN — SVG font-family — Listes de familles et priorité CSS.
4. Google Fonts — Abel — Police normale et licence utilisées pour le texte souhaité.
5. Google Fonts — Anton — Police et licence utilisées pour le cas témoin de substitution.

Si un emblème matriciel bloque la préparation, vectorise l’illustration du logo, vérifie ses bords dans ton éditeur et ajoute le texte sous forme éditable. Effectue ensuite le rendu avec un fichier de police explicite et compare le PNG à ton original avant de le livrer.