Logotipos SVG en React-pdf: renderiza trazados en tu PDF

Para un logotipo SVG pequeño en @react-pdf/renderer, construye el diseño con sus componentes Svg, Path y los demás compatibles. Dale al Svg exterior un tamaño explícito y conserva el viewBox original. La documentación de Image del renderizador enumera entradas PNG y JPG; poner una URL SVG en Image no es el método vectorial descrito aquí.

Esta guía utiliza un ejemplo completo de Node con un emblema cuadrado y una abertura en su centro. Renderizamos el PDF con dependencias fijadas e inspeccionamos el resultado. El ejemplo distingue tres cosas que se confunden fácilmente: el diseño original, el árbol de componentes y el tamaño de colocación en el PDF.

Comprueba qué paquete React PDF utilizas

Este artículo genera documentos con @react-pdf/renderer. El paquete distinto llamado react-pdf muestra PDF existentes. Comprueba la importación de tu archivo antes de copiar una solución de un resultado de búsqueda.

Dentro de un Document del renderizador, utiliza componentes exportados por ese renderizador. Los elementos en minúsculas svg y path de un navegador pertenecen a otro entorno de renderizado. La referencia oficial del componente SVG define Svg como contenedor de la ventana y muestra formas React-pdf importadas en su interior.

La referencia de Image describe entradas de mapa de bits. Una alternativa PNG puede ser útil cuando una apariencia compleja importa más que conservar la geometría vectorial. Cambia la entrega, así que conserva el original vectorial por separado.

También existe un paquete oficial @react-pdf/svg. Su README documenta parseSvg(), que devuelve un árbol de nodos primitivos y convierte los nombres de atributos en camelCase. Indica que los elementos no compatibles se omiten con una advertencia. Es un contrato de análisis, no una promesa de que todos los SVG de navegador se rendericen de forma idéntica. El siguiente ejemplo utiliza componentes explícitos para facilitar la inspección de geometría y pintura.

Renderiza un logotipo mínimo antes de importar el tuyo

Ejecutamos este ejemplo con @react-pdf/renderer 4.9.0, React 19.2.4 y Node 22.19.0. Estas versiones identifican la configuración probada; no garantizan el comportamiento de otro árbol de dependencias.

En un directorio nuevo, instala los dos paquetes de ejecución:

npm install --save-exact @react-pdf/renderer@4.9.0 react@19.2.4

Guarda esto como logo.mjs y después ejecuta node logo.mjs. Utiliza React.createElement para que Node pueda ejecutarlo sin un paso de compilación JSX.

import React from 'react';
import { fileURLToPath } from 'node:url';
import {
  Document, Page, Svg, Path, Rect, renderToFile,
} from '@react-pdf/renderer';
 
const h = React.createElement;
const ring = 'M10 10H90V90H10Z M30 30H70V70H30Z';
 
const logo = h(
  Svg,
  { width: 144, height: 144, viewBox: '0 0 100 100' },
  h(Rect, {
    x: 0, y: 0, width: 100, height: 100, fill: '#f3ede2',
  }),
  h(Path, { d: ring, fill: '#087f8c', fillRule: 'evenodd' }),
);
 
await renderToFile(
  h(Document, null,
    h(Page, { size: 'A4', style: { padding: 36 } }, logo),
  ),
  fileURLToPath(new URL('./logo.pdf', import.meta.url)),
);

Los cuadrados exterior e interior comparten un trazado compuesto. fillRule: 'evenodd' deja abierto el cuadrado interior y muestra el rectángulo claro que hay debajo. No hay un parche blanco cubriendo el centro. Por eso la abertura es una comprobación útil cuando sustituyes el ejemplo por un logotipo con espacios interiores o recortes.

Las coordenadas SVG abarcan 100 unidades en cada dirección, mientras que su ventana colocada es de 144 por 144. viewBox describe el sistema de coordenadas del dibujo; width y height describen su ventana mostrada. Conserva esa distinción al ajustar el tamaño de un logotipo. La tabla oficial de propiedades Svg documenta esos controles y preserveAspectRatio.

Inspecciona el PDF guardado además de su vista previa

Nuestra prueba produjo una página A4 con el anillo cuadrado verde azulado cerca de la esquina superior izquierda. Renderizamos ese archivo con Poppler y comprobamos visualmente que el fondo claro se viera a través de la abertura. pdfimages -list logo.pdf de Poppler no indicó ninguna imagen incrustada en este documento aislado.

Ese resultado es deliberadamente limitado. Describe este ejemplo de solo trazados. No establece que un documento con fotos, imágenes SVG incrustadas o efectos no compatibles sea completamente vectorial.

Si tienes Poppler disponible, estos comandos proporcionan dos comprobaciones diferentes:

pdfimages -list logo.pdf
pdftoppm -png -singlefile -scale-to 1000 logo.pdf logo-preview

El segundo comando crea una vista previa rasterizada para inspección visual; no convierte el PDF original en un mapa de bits. Comprueba la abertura, las esquinas, los colores y la colocación en esa vista previa y después abre el PDF guardado en el visor utilizado por tu destinatario. Una vista previa nítida por sí sola no demuestra que el documento original contenga trazados: un mapa de bits grande también puede verse nítido.

Para una inspección más sólida, examina las instrucciones de dibujo del PDF y los objetos referenciados alrededor del logotipo. Los informes complejos pueden contener objetos anidados, así que empieza con un documento aislado del logotipo antes de diagnosticar todo el informe. La guía de SVG en PDFKit explica otro proceso de importación SVG y sus comprobaciones del PDF guardado.

Traslada tu diseño un elemento cada vez

Sustituye el valor d del ejemplo por tus propios datos de trazado y después conserva el relleno, la regla de relleno, el trazo y la transformación asociados. Copiar solo la forma de un trazado y omitir su pintura puede cambiar el resultado incluso cuando los datos del trazado son válidos.

Para una marca estática pequeña, coloca los colores directamente en las formas compatibles. Un logotipo que depende de la hoja de estilos de una página web necesita resolver esas dependencias antes de convertirse en un componente de documento autónomo. Mantén el SVG original junto al código de renderizado para comparar las revisiones posteriores con el diseño aprobado.

La introducción oficial a SVG enumera las primitivas disponibles. Trátala como lista de compatibilidad, no como el conjunto completo de funciones SVG de un navegador. Prueba las letras, los recortes y los degradados en tu versión instalada antes de añadirlos al informe de producción.

Si el SVG contiene un PNG incrustado, adaptar su contenedor al renderizador no reconstruye la geometría ausente. La guía de imágenes rasterizadas incrustadas muestra cómo distinguir trazados de un mapa de bits almacenado en un archivo SVG.

Cuando el logotipo empieza como PNG o JPG

Si existe un SVG, AI u otro original vectorial editable, pídelo primero. Si solo quedan píxeles, el vectorizador de logotipos de PerfectVector puede preparar una alternativa SVG antes del trabajo con React-pdf. Compara sus contornos, pequeñas aberturas y áreas de color separadas con el original antes de adaptar sus formas compatibles al componente PDF.

La vectorización no repara la integración del renderizador, no crea un componente React ni garantiza compatibilidad con todas las funciones SVG. Mantén bajo revisión manual las letras que necesiten geometría exacta de marca. La guía de vectorización de logotipos ayuda a elegir entre trazar, volver a escribir y redibujar.

Para un original exclusivamente rasterizado, el resultado útil es una alternativa vectorial inspeccionada seguida de un PDF comprobado. Para un original vectorial existente, pasa directamente a comprobar el componente y la colocación. Hay más indicaciones de preparación de originales en el blog.

Preguntas frecuentes

¿Puedo pasar un archivo SVG a Image de React-pdf? Las entradas documentadas de Image son PNG y JPG. Utiliza las primitivas Svg del renderizador para el proceso basado en trazados de esta guía y comprueba tu versión instalada antes de depender de otros comportamientos de entrada.

¿Tengo que trasladar todos los SVG a mano? No. El paquete oficial @react-pdf/svg analiza cadenas SVG en árboles de nodos primitivos. Revisa sus elementos compatibles y advertencias y después conecta y prueba esa salida en tu proceso de renderizado. El ejemplo de componentes explícitos evita un paso adicional de análisis.

¿Por qué se rellena el centro de mi logotipo? Comprueba el trazado compuesto y su regla de relleno. El emblema de prueba utiliza evenodd para que su cuadrado interior permanezca abierto. Conserva la geometría original y las reglas de pintura antes de cambiar el diseño.

¿Demuestra una vista previa PDF nítida que el logotipo es vectorial? No. Inspecciona el contenido y los objetos de imagen del PDF guardado además de su apariencia. El ejemplo aislado de esta guía no tenía imágenes incrustadas; ese resultado no se aplica automáticamente a otro logotipo.

Fuentes

1. React-pdf — Componente Svg — define la ventana, las dimensiones, el viewBox y los controles de relación de aspecto.
2. React-pdf — Componente Image — documenta las formas de entrada PNG y JPG para colocar mapas de bits.
3. React-pdf — Primitivas SVG — enumera los componentes SVG compatibles con el renderizador.
4. React-pdf — Analizador SVG — documenta el árbol de nodos primitivos, la conversión de atributos y las advertencias de elementos no compatibles.

¿Solo tienes un logotipo PNG o JPG? Prepara una alternativa SVG con PerfectVector, compara sus contornos y aberturas con el original y después adapta las formas compatibles e inspecciona el PDF guardado.