Fuentes SVG en resvg: carga la tipografía que necesita tu diseño

Para renderizar fuentes SVG de forma fiable con resvg, proporciona los archivos de fuente al renderizador y usa sus nombres de familia en el SVG. En el enlace nativo para Node, @resvg/resvg-js, esto implica configurar fontFiles; establece loadSystemFonts: false cuando quieras probar exactamente qué fuentes recibe el trabajo. El ejemplo de Node del proyecto muestra esa configuración.

Un PNG puede parecer completo y usar una tipografía incorrecta. Comprueba las formas de las letras incluso cuando el comando de exportación se ejecute correctamente.

Tres entradas de fuentes, un SVG

Creamos un pequeño emblema de montaña con trazados y colocamos a su lado el texto editable PINE & FIELD. El SVG solicita la familia Abel con peso normal. Renderizamos el mismo archivo de origen tres veces con @resvg/resvg-js 2.6.2, Node 22.19.0 y macOS arm64. La búsqueda de fuentes del sistema estuvo desactivada en todos los casos.

Prueba controlada de carga de fuentes

Estas observaciones describen este archivo de prueba y esta configuración. No determinan qué alternativa elegirá otra colección de fuentes, enlace o versión. El diagnóstico útil es más sencillo: la ausencia de la familia solicitada puede producir texto ausente o texto de sustitución que parezca plausible.

Carga una fuente local en resvg-js

Este ejemplo usa el paquete nativo de Node, no el paquete independiente de WebAssembly. Las definiciones de tipos de esa versión enumeran fontFiles, fontDirs y loadSystemFonts dentro de la opción font.

En una carpeta de trabajo nueva, instala la versión usada aquí:

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

Descarga Abel-Regular.ttf y su archivo OFL.txt del directorio Abel de Google Fonts. Conserva ambos en una subcarpeta fonts. Abel se distribuye bajo la licencia SIL Open Font License; conserva la licencia junto a la fuente cuando distribuyas este ejemplo.

Guarda lo siguiente como 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>

Después guarda render.mjs junto al 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);

Ejecuta node render.mjs. Las URL de archivo hacen que las rutas de entrada y salida sean relativas al script, de modo que cambiar el directorio de trabajo de la terminal no cambia qué fuente abre. access() proporciona un error directo del sistema de archivos si la fuente no existe o no es accesible; no valida su contenido.

Para reproducir los controles, no cambies el SVG. Usa un array fontFiles vacío para la primera fila. Para la segunda, descarga Anton-Regular.ttf del directorio Anton de Google Fonts, conserva su licencia y proporciona ese archivo en lugar de Abel. Inspecciona cada PNG antes de cambiar cualquier otra cosa.

Haz coincidir el nombre de familia, no el nombre de archivo

Abel-Regular.ttf es una ruta de archivo. Abel es la familia solicitada por el SVG. Escribir font-family="Abel-Regular.ttf" no indica al renderizador que abra ese archivo.

El atributo SVG font-family acepta nombres de familia o familias genéricas, con una lista por orden de prioridad cuando proporcionas varias. También tiene un equivalente CSS: una declaración CSS font-family que se aplique tiene prioridad sobre el atributo de presentación.

Para tu propio diseño, comprueba tres cosas juntas:

• Familia: el nombre registrado dentro de la fuente y solicitado por el SVG.
• Estilo y peso: si la variante proporcionada coincide con las letras que buscas.
• Caracteres: si la fuente contiene las letras y los símbolos del texto real.

Un readFile correcto solo demuestra que se han leído bytes. Una palabra visible solo demuestra que se han renderizado algunas letras. Ninguna de las dos cosas demuestra que la variante elegida sea la de tu diseño.

Para un diagnóstico más amplio de texto editable frente a contornos, consulta por qué cambian las fuentes SVG después de exportar.

Comprueba las mismas entradas en tu entorno de exportación

Trata la fuente como una entrada del trabajo de diseño. Incluye el archivo de fuente necesario en tu despliegue o paquete del trabajo y confirma después que la ruta resuelta apunte a ese archivo en ese entorno. Es fácil olvidar una tipografía instalada en tu portátil de diseño al preparar un trabajo para un servidor.

Empieza con la búsqueda del sistema desactivada y la lista explícita de fuentes más pequeña que cubra tu texto de prueba. Una vez que esa salida sea correcta, prueba las palabras, signos de puntuación, pesos e idiomas reales del diseño. Nuestro texto latino de peso normal no prueba otras escrituras ni familias de fuentes complejas.

Si las letras siguen viéndose mal, inspecciona el archivo de origen en busca de reglas CSS que anulen los ajustes y de estilos en <tspan> anidados. Si tanto el emblema como el texto aparecen recortados o escalados de forma inesperada, investiga por separado los límites SVG y las dimensiones raster. Nuestro tutorial de tamaños en CairoSVG explica esa distinción en otro renderizador; sus opciones son específicas de CairoSVG.

Cuando compartas un informe de error o un trabajo de exportación reproducible, incluye el SVG, la versión exacta del enlace, los nombres y versiones de las fuentes, las opciones del renderizador y una imagen esperada. Ten en cuenta los permisos de redistribución de fuentes al empaquetar los archivos.

Conserva el origen editable junto al PNG

El código anterior escribe un PNG. Es un archivo de entrega raster; sus letras visibles ya no son texto SVG editable. Conserva label.svg y las fuentes de entrada como origen para futuros cambios de texto.

Si el destinatario necesita un logotipo vectorial con letras fijas, prepara en tu editor vectorial una copia de entrega SVG independiente con el texto convertido a contornos e inspecciónala allí. Conserva el original con texto editable. Nuestra guía de formatos de archivo para logotipos explica qué archivos de origen y de entrega sirven para distintas tareas.

Si el emblema que necesitas solo existe en un PNG o JPG, el vectorizador de logotipos de PerfectVector puede ayudar a recuperar el diseño vectorial de esa parte. Inspecciona los trazados resultantes, elimina cualquier letra trazada que no quieras y vuelve a escribir el texto con una fuente conocida antes de ejecutar la exportación resvg. La vectorización no identifica la fuente original ni recupera texto editable. La guía de vectorización de imágenes explica qué cambia esa conversión.

Preguntas frecuentes

¿Por qué desaparece el texto cuando desactivo las fuentes del sistema? En nuestra prueba sin fuentes, el renderizador no disponía de ninguna variante proporcionada para el texto editable, así que solo apareció el diseño de trazados. Carga explícitamente una fuente adecuada y comprueba su familia, estilo y cobertura de caracteres.

¿Puedo usar el nombre del archivo de fuente como nombre de familia SVG? Usa el nombre de familia de la fuente en el SVG. Pasa el nombre de archivo local por separado mediante fontFiles. Cambiar el nombre de un archivo de fuente no cambia su nombre interno de familia.

¿Convierte resvg mi logotipo PNG en un SVG editable? El ejemplo de aquí renderiza SVG como PNG. No vectoriza un logotipo raster. Recupera el emblema mediante un flujo de vectorización si hace falta y después añade texto editable y conserva ese SVG como original.

Fuentes

1. resvg-js — README de la versión 2.6.2 — Uso nativo en Node y carga explícita de fuentes.
2. resvg-js — Definiciones de tipos de la versión 2.6.2 — Configuración de fuentes y API de imágenes renderizadas.
3. MDN — font-family en SVG — Listas de familias y prioridad de CSS.
4. Google Fonts — Abel — Variante normal y licencia usadas para el texto previsto.
5. Google Fonts — Anton — Fuente y licencia usadas en el control de sustitución.

Si un emblema raster retrasa el diseño, vectoriza el logotipo, comprueba sus bordes en tu editor y añade las letras como texto editable. Después renderiza con un archivo de fuente explícito y compara el PNG con el original antes de entregarlo.