SVG en jsPDF: conserva trazados de logotipo en un PDF creado en el navegador

Para colocar trazados de un logotipo SVG en un PDF generado en el navegador con jsPDF, carga svg2pdf.js, pasa un elemento SVG a await doc.svg(...) y guarda después el documento. Elige addSvgAsImage solo cuando una imagen raster sea aceptable. Que su entrada sea SVG no significa que el PDF resultante contenga trazados SVG.

El ejemplo de uso de svg2pdf.js documenta la llamada asíncrona basada en un elemento. La implementación del módulo SVG de jsPDF muestra el otro método: renderizar en un lienzo, codificar un JPEG y añadir esa imagen al PDF.

Para un logotipo de factura, entrada o informe, conserva el SVG original como maestro editable. Esta guía prueba un emblema sencillo de dos colores, establece su colocación en puntos PDF y comprueba los objetos guardados. No supone que todas las funciones SVG sobrevivan a la conversión.

Elige la salida que necesitas

El tercer método resulta útil cuando necesitas un PDF de logotipo preparado en lugar de un documento ensamblado en JavaScript. Para flujos de documentos fuera del navegador, la guía de SVG en LaTeX explica un proceso separado de exportación e inclusión. Para un proceso de documentos en Node, el ejemplo SVG de PDFKit distingue la inserción de un documento completo del análisis de un solo trazado.

Cuando la entrega sea una presentación, utiliza la guía de imágenes SVG de PptxGenJS. Comprueba la proporción del logotipo, los recursos multimedia del PPTX exportado y su apariencia en la aplicación de presentaciones, en lugar de aplicar ajustes de exportación PDF a otro formato de documento.

Ejecuta primero un ejemplo pequeño con versiones fijadas

El ejemplo se ejecutó en un navegador con jsPDF 4.2.1 y svg2pdf.js 2.8.1. Son las versiones probadas, no una promesa sobre versiones futuras. El paquete se llama svg2pdf.js, incluido el sufijo; los paquetes con nombres similares pueden servir para flujos diferentes.

En un pequeño proyecto de navegador con un empaquetador JavaScript, instala:

npm install jspdf@4.2.1 svg2pdf.js@2.8.1

Usa este emblema original como entrada. Su anillo tiene una abertura real mediante la regla de relleno par-impar. El segundo trazado es un pico redondeado. No hay fuentes, archivos enlazados, filtros ni imágenes raster incrustadas.

import { jsPDF } from 'jspdf';
import 'svg2pdf.js';
 
const svgText = `<svg xmlns="http://www.w3.org/2000/svg"
  width="240" height="160" viewBox="0 0 240 160">
  <path fill="#174d64" fill-rule="evenodd"
    d="M20 80 C20 15 120 15 120 80 C120 145 20 145 20 80 Z
       M48 80 C48 111 92 111 92 80 C92 49 48 49 48 80 Z"/>
  <path fill="#e66d45"
    d="M130 120 L170 35 Q178 20 188 35 L225 120 Z"/>
</svg>`;
 
async function makeVectorPdf() {
  const svg = new DOMParser()
    .parseFromString(svgText, 'image/svg+xml')
    .documentElement;
  const doc = new jsPDF({
    unit: 'pt',
    format: [300, 220],
    orientation: 'landscape'
  });
  await doc.svg(svg, { x: 30, y: 30, width: 240, height: 160 });
  return doc;
}
 
const doc = await makeVectorPdf();
doc.save('logo-vector.pdf');

Ejecuta esto en el navegador, no directamente en un script Node.js. Las notas de uso y alcance de la biblioteca requieren un DOM de navegador funcional y describen compatibilidad SVG limitada. En una aplicación renderizada en el servidor, coloca este trabajo en el controlador de exportación del lado del cliente.

La cadena de aquí es una ilustración fija y confiable. Si tu aplicación acepta subidas SVG arbitrarias, analizar XML por sí solo no es sanearlo. Sigue las indicaciones de la biblioteca para sanear el SVG proporcionado por usuarios y aislar su ejecución antes de construir un flujo de subidas.

Establece la colocación por separado del viewBox

En este ejemplo, unit: 'pt' hace que las medidas PDF sean puntos. La página mide 300 por 220 puntos; el área de visualización de la ilustración empieza a 30 puntos del borde izquierdo y superior y ocupa 240 por 160 puntos. La documentación del constructor de jsPDF describe las opciones de unidad del documento, formato y orientación.

El viewBox="0 0 240 160" del SVG describe sus coordenadas internas. No es un tamaño de página PDF. Mantener el ancho y la altura de destino en la misma proporción 3:2 facilita comprobar el ajuste previsto. Para reducir a la mitad la ilustración colocada, usa width: 120, height: 80; las coordenadas de trazado originales pueden permanecer intactas.

Da al SVG exportado dimensiones explícitas y un viewBox razonable antes de depurar su posición en PDF. Un borde vacío inesperadamente grande puede pertenecer al lienzo SVG. Mover x e y mueve toda el área de visualización SVG, incluido ese espacio vacío.

Inspecciona ambos PDF guardados

Para comparar, la misma ejecución en el navegador también creó esta versión deliberadamente rasterizada:

const raster = new jsPDF({
  unit: 'pt',
  format: [300, 220],
  orientation: 'landscape'
});
await raster.addSvgAsImage(svgText, 30, 30, 240, 160);
raster.save('logo-raster.pdf');

La prueba utilizó la dependencia canvg instalada de jsPDF, 3.0.11, para ese método. Ambos PDF se guardaron, volvieron a abrir y renderizaron a la misma escala. La inspección de dibujos e imágenes de PyMuPDF informó de:

El flujo de contenido del archivo vectorial contenía comandos de curva y un relleno par-impar para el anillo. El archivo raster colocaba un objeto de imagen. Estos recuentos describen este ejemplo pequeño; un SVG más complejo puede producir objetos distintos o contener su propio contenido raster.

El rectángulo negro es un resultado observado de esta exportación raster, incluida la abertura antes transparente del anillo. JPEG no conserva transparencia alfa; no supongas que las regiones transparentes de un SVG sobrevivan a ese método. Comprueba el fondo que realmente necesitas, especialmente cuando el logotipo vaya a estar sobre un panel de documento de color.

Ampliar por sí solo no es evidencia suficiente. Todos los visores PDF terminan dibujando píxeles en tu pantalla. Inspecciona los objetos del PDF y compara la apariencia guardada con el maestro SVG. Un comando como pdfimages -list logo-raster.pdf, de Poppler, puede enumerar imágenes incrustadas. Una lista vacía de imágenes por sí sola no demuestra que las formas previstas se hayan exportado correctamente: la página podría estar en blanco. Comprueba también su contenido de dibujo y su apariencia.

Corrige la parte de la exportación que falla

Un SVG ya puede envolver un mapa de bits. Pasar ese archivo por un exportador compatible con vectores no transforma sus píxeles en contornos editables. Usa la guía de inspección de raster incrustado antes de cambiar ajustes PDF.

Esta prueba no cubre disposición de texto, filtros, imágenes externas ni CSS arbitrario. svg2pdf.js limita explícitamente su alcance a un subconjunto de SVG. Para letras, sigue sus instrucciones de configuración de fuentes antes de convertir o prepara contornos en el diseño original cuando ese compromiso sea adecuado. Conserva un maestro con texto editable si importan los cambios de palabras futuros.

Prepara el original del logotipo con PerfectVector

Si el logotipo ya es una ilustración vectorial limpia, usa ese original. Si solo queda un PNG o JPG, PerfectVector puede ayudar a recuperar formas editables antes del paso PDF. Vectoriza el logotipo e inspecciona después su contorno exterior, aberturas pequeñas y colores separados en un editor SVG. La guía de preparación de logotipos explica esa inspección con más detalle.

PerfectVector prepara la ilustración raster para este flujo; no añade compatibilidad SVG a jsPDF ni repara funciones incompatibles de un exportador. Compara los trazados recuperados con tu imagen original, simplifica o redibuja los detalles que lo necesiten y repite después la comprobación PDF. Conserva una fotografía como imagen cuando vectorizarla descarte el detalle que necesitas. La guía general de vectorización de imágenes explica esa elección de original.

Preguntas frecuentes

¿addSvgAsImage conserva mi SVG como trazados vectoriales? No. La implementación probada de jsPDF 4.2.1 renderiza el SVG mediante un lienzo e incrusta un JPEG. Usa svg2pdf.js con doc.svg cuando necesites que su geometría compatible se convierta en contenido de dibujo PDF.

¿doc.svg acepta un nombre de archivo SVG? La API demostrada recibe un elemento DOM SVG. Carga y analiza primero un archivo confiable o selecciona un elemento SVG existente, y después pásalo a doc.svg y espera el resultado.

¿Todos los SVG se verán igual en el PDF? No. svg2pdf.js admite una parte limitada de SVG. Prueba tu ilustración real, incluidas fuentes, imágenes, efectos, dimensiones y fondos, y vuelve a abrir el PDF guardado antes de utilizarlo.

Fuentes

1. yWorks — Uso y alcance de svg2pdf.js — API de elemento SVG, conversión asíncrona, configuración de fuentes, requisitos de navegador y limitaciones de alcance compatible.
2. jsPDF — Módulo SVG en la versión 4.2.1 — Implementación de lienzo y JPEG utilizada por addSvgAsImage.
3. jsPDF — Referencia del constructor — Unidades de documento PDF, formato de página y opciones de orientación.
4. PyMuPDF — Inspección de páginas — Métodos de inspección de dibujos e imágenes utilizados para examinar los archivos de prueba guardados.

¿Solo tienes un logotipo raster? Prepara un SVG editable de tu logotipo, comprueba sus contornos y aberturas, expórtalo después con el método PDF elegido e inspecciona los objetos guardados y el fondo.